ブラウザ

ブラウザアプリにOpenTelemetryを追加する方法を学ぶ

このガイドでは以下に示すサンプルアプリケーションを使用しますが、独自のアプリケーションを計装する手順も同様のはずです。

前提条件

以下がローカルにインストールされていることを確認してください。

サンプルアプリケーション

これは非常にシンプルなガイドです。 より複雑な例を見たい場合は、examples/opentelemetry-webを参照してください。

以下のファイルを空のディレクトリにコピーし、index.htmlという名前を付けます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Document Load Instrumentation Example</title>
    <base href="/" />
    <!--
      https://www.w3.org/TR/trace-context/
      サーバーのHTMLテンプレートコードで`traceparent`を設定します。これは、
      サーバーのリクエストトレースID、サーバーのリクエストスパンに設定された
      親スパンID、およびサーバーのサンプリング決定を示すトレースフラグ
      （01 = サンプリング済み、00 = サンプリングなし）を持つように、
      サーバー側で動的に生成される必要があります。
      '{version}-{traceId}-{spanId}-{sampleDecision}'
    -->
    <meta
      name="traceparent"
      content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    コンソールエクスポーターとコレクターエクスポーターを使用した、
    ドキュメントロード計装を持つWebトレーサーの使用例
  </body>
</html>

インストール

ブラウザでトレースを作成するには、@opentelemetry/sdk-trace-webと計装 @opentelemetry/instrumentation-document-loadが必要です。

npm init -y
npm install @opentelemetry/api \
  @opentelemetry/sdk-trace-web \
  @opentelemetry/instrumentation-document-load \
  @opentelemetry/context-zone

初期化と構成

TypeScriptでコーディングしている場合は、次のコマンドを実行します。

tsc --init

次に、parcelを取得します。 これにより、（他の機能の中でも）TypeScriptで作業できるようになります。

npm install --save-dev parcel

選択した言語に応じて、.tsまたは.js拡張子を持つdocument-loadという名前の空のコードファイルを作成します。 HTMLの</body>閉じタグの直前に次のコードを追加します。

<script type="module" src="document-load.ts"></script>

<script type="module" src="document-load.js"></script>

ドキュメントのロードタイミングをトレースし、それらをOpenTelemetryスパンとして出力するコードを追加します。

トレーサープロバイダーの作成

document-load.ts|jsに次のコードを追加して、ドキュメントロードをトレースするための計装をもたらすトレーサープロバイダーを作成します。

/* document-load.ts|jsファイル - 両方の言語で同じコードスニペット */
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';

const provider = new WebTracerProvider();

provider.register({
  // デフォルトのcontextManagerをZoneContextManagerに変更 - 非同期操作をサポート - オプション
  contextManager: new ZoneContextManager(),
});

// 計装の登録
registerInstrumentations({
  instrumentations: [new DocumentLoadInstrumentation()],
});

parcelでアプリをビルドします。

npx parcel index.html

開発Webサーバー（例：http://localhost:1234）を開いて、コードが動作するか確認します。

まだトレースの出力はありません。これにはエクスポーターを追加する必要があります。

エクスポーターの作成

次の例では、すべてのスパンをコンソールに出力するConsoleSpanExporterを使用します。

トレースを視覚化して分析するには、トレーシングバックエンドにエクスポートする必要があります。 バックエンドとエクスポーターの設定については、これらの手順に従ってください。

また、リソースをより効率的に使用するために、BatchSpanProcessorを使用してスパンをバッチでエクスポートすることもできます。

トレースをコンソールにエクスポートするには、document-load.ts|jsを次のコードスニペットに一致するように変更します。

/* document-load.ts|jsファイル - 両方の言語で同じコード */
import {
  ConsoleSpanExporter,
  SimpleSpanProcessor,
} from '@opentelemetry/sdk-trace-base';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
import { ZoneContextManager } from '@opentelemetry/context-zone';
import { registerInstrumentations } from '@opentelemetry/instrumentation';

const provider = new WebTracerProvider({
  spanProcessors: [new SimpleSpanProcessor(new ConsoleSpanExporter())],
});

provider.register({
  // デフォルトのcontextManagerをZoneContextManagerに変更 - 非同期操作をサポート - オプション
  contextManager: new ZoneContextManager(),
});

// 計装の登録
registerInstrumentations({
  instrumentations: [new DocumentLoadInstrumentation()],
});

アプリケーションを再ビルドし、ブラウザを再度開きます。 開発者ツールバーのコンソールに、いくつかのトレースがエクスポートされているのが表示されるはずです。

{
  "traceId": "ab42124a3c573678d4d8b21ba52df3bf",
  "parentId": "cfb565047957cb0d",
  "name": "documentFetch",
  "id": "5123fc802ffb5255",
  "kind": 0,
  "timestamp": 1606814247811266,
  "duration": 9390,
  "attributes": {
    "component": "document-load",
    "http.response_content_length": 905
  },
  "status": {
    "code": 0
  },
  "events": [
    {
      "name": "fetchStart",
      "time": [1606814247, 811266158]
    },
    {
      "name": "domainLookupStart",
      "time": [1606814247, 811266158]
    },
    {
      "name": "domainLookupEnd",
      "time": [1606814247, 811266158]
    },
    {
      "name": "connectStart",
      "time": [1606814247, 811266158]
    },
    {
      "name": "connectEnd",
      "time": [1606814247, 811266158]
    },
    {
      "name": "requestStart",
      "time": [1606814247, 819101158]
    },
    {
      "name": "responseStart",
      "time": [1606814247, 819791158]
    },
    {
      "name": "responseEnd",
      "time": [1606814247, 820656158]
    }
  ]
}

計装の追加

Ajaxリクエスト、ユーザーインタラクションなどを計装したい場合は、それらのための追加の計装を登録できます。

registerInstrumentations({
  instrumentations: [
    new UserInteractionInstrumentation(),
    new XMLHttpRequestInstrumentation(),
  ],
});

Web用メタパッケージ

最も一般的な計装をすべて1つにまとめて活用するには、単純にOpenTelemetry Meta Packages for Webを使用できます。


最終更新 June 22, 2025: docs(i18n): translate content/ja/docs/languages/js/getting-started/browser.md into ja (79d3889a)