New Relic を使用してエンドユーザーのブラウザー アクティビティを監視する場合、分散トレースを利用して、エンドユーザー エクスペリエンスに由来するブラウザー側のトレースを確認できます。
フロントエンドからバックエンドまでアクティビティをトレース
分散トレーシングでブラウザー データをレポートすることにより、フロントエンド アクティビティとバックエンド アクティビティの間の接続を確認できます。New Relic は、エンド ユーザーが Web ブラウザーで費やした時間から、ネットワーク アクティビティ、関連するバックエンド サービスまで、トランザクション全体にわたってデータをトレースします。これは次のことに役立ちます。
- ブラウザまたはネットワークのレイテンシ、エラー、および異常をより簡単に特定します。
- 顧客が直面している問題をより迅速に解決します。
- 分散トレーシングのすべての利点をエンドユーザー監視に適用します。
この機能は、 ブラウザの対話中に発生する AJAX リクエスト ( FetchおよびXHR ) を報告します。デフォルトでは、クロスオリジン リソース共有が有効になっていない限り、単一オリジンのリクエストのみが監視されます。
ブラウザと APM のバージョン
エージェントとエージェントに必要な最小バージョンがあることを確認してください。
Browser monitoring:
- 分散トレースの場合:分散トレースが有効になっているBrowser Pro+SPA エージェントおよびBrowser エージェント バージョン 1153以降
- クロスオリジン リソース共有の場合: ブラウザ エージェント バージョン 1158以降
- W3C トレース コンテキストサポートの場合: ブラウザ エージェント バージョン 1173以降
APM:
- Java 5.9.0 またはそれ以上
- PHP 9.4.0以上
- その他のAPMエージェントのバージョン要件
ディストリビューティッド（分散）トレーシングの有効化
デフォルトでは、エージェント バージョン 1173 以降の場合、 newrelic 、 traceparent 、およびtracestateヘッダーがすべての同一オリジン AJAX リクエストに追加されます。(それらを除外すると、ヘッダーは送信されません。)詳細については、 W3C トレース コンテキスト ヘッダーに関するドキュメントを参照してください。
ブラウザ監視のための分散型トレースを有効にするには
ブラウザー監視エージェントと APM エージェントが分散トレースと互換性があることを確認してください。該当する場合は、最新バージョンに更新します。
one.newrelic.com > All capabilities > Browser > (select an app) > Settings > Application settings
に移動します。
Distributed tracing
トグルをオンにします。
オプション： クロスオリジンのリソース共有を有効にする.
関連付けられている APM エージェントを再起動するか、コピー アンド ペースト ブラウザのインストールを更新して、ブラウザ モニタリング エージェントを再デプロイします。
ブラウザー アプリのダウンストリームにあるアプリまたはサービスがあり、それらが Infinite Tracing を使用している場合は、 Infinite Tracing のセットアップ手順を完了します。
W3C トレース コンテキスト ヘッダー
ブラウザ監視エージェント バージョン 1173 のリリースにより、W3C トレース コンテキスト ヘッダー ( traceparentおよびtracestate ) がサポートされるため、構成でそれらを許可してください。W3C トレース コンテキストは、サービス間でコンテキスト相関情報を伝達するために使用される、標準化されたコンテキスト HTTP ヘッダーのペアを定義します。
traceparentヘッダーには、すべての分散トレース モデルがコンテキストを定義および伝達するために必要なデータ要素 (トレース ID、親 ID、サンプル フラグ) が含まれています。tracestateヘッダーには、通常、特定のトレース ツールに関連する追加機能または最適化をサポートするために、ベンダー固有のコンテキスト データが保持されます。
W3C トレース コンテキストの詳細については、ブログ投稿を参照してください。
Cross-Origin Resource Sharing（CORS）の有効化
異なるオリジンからのリソースを必要とする AJAX リクエストがある場合は、クロスオリジン リソース共有 (CORS) を有効にすることができます。デフォルトでは、 traceparent newrelicのセキュリティ制限のため、クロスオリジン リクエストの分散トレースは有効になっていませんtracestate通常、クロスオリジン リクエストでカスタム ヘッダーを許可しません。
クロスオリジンの分散型トレースを有効にするには、2つの別々の設定が必要です。
newrelicカスタム ヘッダーを受け入れるように、別のオリジンでサービスを構成してください。Application settings
でブラウザ監視を設定して、ターゲット オリジンをディストリビューティッド（分散）トレーシングに含めます。
このセクションでは、CORS を有効にして構成するための主要な概念と手順について説明します。クロスオリジンのリソース共有がどのように機能するかについての背景がさらに必要な場合は、このMozilla 開発者ドキュメントをお勧めします。
注意
次のセクションで説明するように、オリジン間のリソース共有は、異なるオリジンのサービスが正しく構成されていない場合、高レベルのリスクにさらされる可能性があります。次の 3 つのセクションを順番に読むことをお勧めします。
インフィニット トレースの有効化
Infinite Tracingと呼ばれる末尾ベースの分散トレース機能を提供しています。ブラウザ アプリにダウンストリーム サービスがある場合は、必ず有効にしてください。これにより、ルート スパン (開始ブラウザー アプリ) が無限トレースによって追跡される残りのスパンに含まれるようになります。
Infinite Tracingを設定するには、次のようにします。
- 分散トレースを有効にする手順を完了します。
- Infinite Tracing のドキュメントに移動し、手順に従ってトレース オブザーバーを作成し、トレース スパンを Infinite Tracing トレース オブザーバーに送信するアプリ (データ ソース) を選択します。
トレース データを調べる
ここでは、New Relic でトレース データを検索してクエリを実行するためのヒントをいくつか紹介します。
あなたがしたい場合は... | これを行う... |
|---|---|
エンドユーザーの経験に由来する痕跡を調べる | New Relic UI の任意の分散トレーシング ページに移動します。 |
エンドユーザー スパンを表示する | 分散トレーシングUIでは、エンドユーザーのスパンは アイコン。スパンの属性を表示するには、UI 。 |
スパン データのクエリ | スパンは
|
トラブルシューティング
エンドユーザー スパンが表示されない場合、またはその他の分散トレースの問題がある場合は、トラブルシューティングのドキュメントを参照してください。