ブラウザを使用してエンドユーザーのブラウザ操作を監視している場合、エンドユーザーが発信したブラウザ側のトレースを 分散型トレース で確認できるようになりました。このドキュメントには
分散型トレーシングにおけるブラウザデータの利点
New Relic を有効にしてブラウザデータを 分散トレース にレポートすることで、フロントエンドのアクティビティとバックエンドのアクティビティの関連性を確認することができます。エンドユーザーがウェブブラウザで過ごした時間から、ネットワークアクティビティ、関連するバックエンドサービスまで、トランザクション全体を把握することができます。
この機能のメリット
- ブラウザやネットワークのレイテンシー、エラー、異常を素早く発見できる
- お客様の問題をより早く解決する
- 分散型トレースのすべての利点 エンドユーザーのモニタリングに適用されます。
要件と互換性 [#requirements]
この機能は、 ブラウザのインタラクション中に発生したAJAXリクエスト（FetchおよびXHR）をレポートします。 。デフォルトでは、 クロスオリジンのリソース共有 が有効になっていない限り、シングルオリジンのリクエストのみが監視されます。
ブラウザとAPMエージェントの必要最小限のバージョンを確認してください。
Browser Pro+SPA エージェント with distributed tracing enabled:
- ブラウザエージェントバージョン1153 以上
- ブラウザエージェントのバージョン1158 以上（ クロスオリジンのリソース共有に必要です)
- ブラウザエージェントのバージョン 1173 以上（ w3c トレースコンテキスト のサポートに必要）。
APMエージェントのバージョン
- C SDK 1.3 以上
- Java 5.9.0 またはそれ以上
- PHP 9.4.0以上
- その他のAPMエージェントのバージョン要件
ディストリビューティッド（分散）トレーシングの有効化
ブラウザ監視のための分散型トレースを有効にするには
- 要件を満たしていることを確認してください.
- one.newrelic.com にアクセスし、 ブラウザ をクリックして、アプリを選択し、左側にある アプリケーション設定 をクリックします。
- 分散トレーストグルがオンになっていることを確認します。デフォルトでは、エージェントバージョン1173以降では、
newrelic、traceparent、およびtracestateヘッダーがすべての同一生成元のAJAXリクエストに追加されます。 - オプション：すべてのサービスがw3cトレースコンテキストヘッダーを使用するように構成されている場合は、リクエストから
newrelic、traceparent、およびtracestateヘッダーを除外することを選択できます。 - オプション： クロスオリジンのリソース共有を有効にする.
- ブラウザ監視エージェントの再配置 （関連するAPMエージェントを再起動するか、コピー/ペーストのブラウザインストールを更新するか）。
- 高度なオプションInfinite Tracingを使用するブラウザアプリの下流にあるアプリやサービスがある場合は、次の セットアップ手順を参照してください 。
インフィニット トレースの有効化
ブラウザアプリに、無限トレースと呼ばれるテールベースの分散トレースを使用するダウンストリームサービスがある場合は、ブラウザアプリでこの機能を有効にする必要があります。これにより、ルートスパン（開始ブラウザーアプリ）が、InfiniteTracingによって追跡される残りのスパンに含まれるようになります。
Infinite Tracingを設定するには、次のようにします。
- 上記の手順で、 distributed tracing を有効にしてください。
- トレースオブザーバーを作成する手順や、トレーススパンをInfinite Tracingのトレースオブザーバーに送信するアプリ（データソース）を選択する手順については、 Infinite Tracingのドキュメント をご覧ください。
Cross-Origin Resource Sharing（CORS）の有効化
異なるオリジンからのリソースを必要とするAJAXリクエストがある場合は、クロスオリジンリソースシェアリング（CORS）を有効にできます。デフォルトでは、ブラウザのCORSセキュリティ制限のため、クロスオリジンリクエストの分散トレースは有効になっていません。分散トレースは、カスタムHTTPヘッダー（ newrelic 、 traceparent 、およびtracestate ）を送信AJAXリクエストに追加することで実装されます。ブラウザは通常、クロスオリジンリクエストでカスタムヘッダーを許可しません。
エージェントバージョン1173のリリースにより、w3cトレースコンテキストヘッダー（ traceparentおよびtracestate ）がサポートされるようになったため、これらも構成で許可される必要があります。
クロスオリジンの分散型トレースを有効にするには、2つの別々の設定が必要です。
newrelicカスタムヘッダーを受け入れるように別のオリジンでサービスを構成します- ターゲットオリジンを分散型トレースに含めるためのブラウザモニタリングの設定
私たちの step-by-step instructions では、この機能を有効にするための重要な概念と手順を説明していますが、クロスオリジンのリソース共有がどのように機能するかについて、より詳しい背景が必要な場合は、こちらの Mozilla 開発者向けドキュメント をお勧めします。
リスクと緩和策
注意
クロスオリジンのリソース共有では、異なるオリジンのサービスが正しく設定されていないと、高いリスクにさらされる可能性があります。AJAXリクエストがエラーを返す可能性が高く、以下のような様々な障害が発生します。
リソースの読み込みに失敗する（画像や主要コンテンツなど）。
ログインの失敗
サイト全体の停止（有効なリクエストの種類による）
このクロスオリジンのリソース共有機能を有効にすることで、お客様は以下のことを認めたことになります。
この機能はオプションであり、必須ではないことをご理解ください。
自分のサービスやドメインでこの機能を有効にするために必要な手順を理解している。
お客様は、導入前にサービスを適切に設定しないと（カスタムヘッダーを受け入れるようにお客様のドメイン上でサービスを設定することを含みますが、これに限定されません）、お客様のウェブサイトの一部または全部が機能しなくなる可能性があることを理解します。
お客様は、お客様によるサーバーやサービスの設定ミスに関連するエラーや問題について、ニューレリックが責任を負わないことを理解しています。
リスクを完全かつ唯一受け入れ、続行することを希望する。
リスクを最小限に抑える最善の方法は、プロセスを十分に理解し、まずテスト環境で試してみることです。 ステップ・バイ・ステップの説明書 を読む前に、まずこのプロセスの概要を読むとよいでしょう。
クロスオリジンリソースで分散トレースを使用するには、承認されたクロスオリジンリソースのリストをNew Relicに入力すると、次のカスタムヘッダーがそれらのリソースに自動的に送信されます： newrelic 、 traceparent 、およびtracestate 。このプロセスを機能させるには、まず、誰かがこのカスタムヘッダーを受け入れるように他のオリジンでサービスを構成していることを確認する必要があります。
クロスオリジンリソースシェアリングは、さまざまなHTTPヘッダー（リクエストとレスポンスの両方）を使用します。 New Relicに特に適用されるヘッダーは、 Access-Control-Allow-Headers応答ヘッダーです。これには、APMで監視されるアプリケーションで有効にしたトレース戦略に応じて、値にnewrelic 、 traceparent, tracestate 、またはnewrelic, traceparent, tracestateを含めることができます。このCORSヘッダーを応答で返すようにサーバーを構成する必要があります。例：
Access-Control-Allow-Headers: newrelic, traceparent, tracestate
重要
New Relic は、他のオリジンのサービスが正しく設定されているかどうかの検証を行うことはできません。これらのヘッダーを許可する方法がわからない場合は、 not New Relic UI の承認済みリストにクロスオリジンのリソースを追加してください。
クロスオリジンのリソース共有を可能にする
注意
本番環境で設定する前に、必ずテスト環境でCORSを有効にしてみてください。
クロスオリジンのリソース共有を可能にするために
他のオリジンのサービスが、
Access-Control-Allow-Headers: newrelic, traceparent, tracestateを使用してnewrelicヘッダーを受け入れるように構成されていることを確認します（詳細については、リスクと軽減策を参照してください）。one.newrelic.com にいることを確認し、「ブラウザ」> （アプリを選択）> 「アプリケーションの設定」 をクリックします。
Distributed tracing のトグルがまだ有効になっていなければ、これをオンにします。
Cross-origin Resource Sharing (CORS) のトグルをオンにします。
Cross-origin Resource Sharing (CORS) の下で、Cross-origin Resource を承認リストに追加する。
重要
有効なクロスオリジンのリソースには、以下が含まれていなければなりません。
プレフィックス
http://またはhttps://ドメイン名
ポート番号は、HTTP（80番ポート）またはHTTPS（443番ポート）のデフォルト値と異なる場合を除き、必要ありません。
Save application settings を選択して、エージェントの設定を更新します。
ブラウザエージェントの再配置 （関連するAPMエージェントを再起動するか、コピー・ペーストによるブラウザのインストールを更新する）。
データを探す
データの検索と照会のためのヒント
エンドユーザーが作成したトレースは、NewRelicの分散トレースUIで見つけることができます。
分散トレースUIでは、エンドユーザースパンは
アイコン。
スパンの属性を見るには、UI で a span を選択します。
スパンは
Spanデータとして報告され、NewRelicでクエリできます。クエリのヒント
browserApp.nameをブラウザアプリ名に設定して、ブラウザアプリ名でクエリします。browserApp.name is not nullを含む少なくとも1つのブラウザアプリスパンを含むトレースをクエリします。appName is not nullを含む少なくとも1つのバックエンドアプリを含むトレースをクエリします。- 前述の2つの条件を組み合わせて、ブラウザとバックエンドの両方のスパンを含むトレースを検索します。
トラブルシューティング
エンドユーザースパンが表示されない、またはその他の分散型トレースの問題がある場合は、 トラブルシューティング を参照してください。