ブラウザ
The content of this page may be outdated and some links may be invalid. A newer version of this page exists in English. To see the changes to the English page since this page was last updated: visit GitHub compare 6f3712c5..4c9af591 and search for More information ...
content/en/docs/languages/js/getting-started/browser.md.
ブラウザ向けのクライアント計装は実験的であり、主に未規定です。協力に興味をお持ちの場合は、Client Instrumentation SIGまでご連絡ください。
このガイドでは以下に示すサンプルアプリケーションを使用しますが、独自のアプリケーションを計装する手順も同様のはずです。
前提条件
以下がローカルにインストールされていることを確認してください。
- Node.js
- TypeScript（TypeScriptを使用する場合）。
サンプルアプリケーション
これは非常にシンプルなガイドです。 より複雑な例を見たい場合は、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を使用できます。
フィードバック
このページは役に立ちましたか?
Thank you. Your feedback is appreciated!
Please let us know how we can improve this page. Your feedback is appreciated!