ブラウザを使用してエンドユーザーのブラウザ操作を監視している場合、エンドユーザーが発信したブラウザ側のトレースを 分散型トレース で確認できるようになりました。このドキュメントには
分散型トレーシングにおけるブラウザデータの利点
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 にアクセスし、 ブラウザ をクリックして、アプリを選択し、左側にある アプリケーション設定 をクリックします。
- Distributed tracing のトグルがオンになっていることを確認します。デフォルトでは、エージェントのバージョン 1173 以上では、
newrelic
、traceparent
、tracestate
ヘッダがすべての同一オリジンの AJAX リクエストに追加されます。 - Optional: すべてのサービスが w3c trace context headers を使用するように設定されている場合、
newrelic
、traceparent
、tracestate
ヘッダをリクエストから除外するように選択できます。 - オプション: クロスオリジンのリソース共有を有効にする.
- ブラウザ監視エージェントの再配置 (関連するAPMエージェントを再起動するか、コピー/ペーストのブラウザインストールを更新するか)。
- 高度なオプションInfinite Tracingを使用するブラウザアプリの下流にあるアプリやサービスがある場合は、次の セットアップ手順を参照してください 。
インフィニット トレースの有効化
Infinite Tracing と呼ばれる高度なタイプの分散型トレーシングを使用するダウンストリームサービスがブラウザアプリにある場合は、ブラウザアプリのこの機能を有効にしてください。これにより、ルートスパン(開始したブラウザアプリ)が、Infinite Tracingで追跡される残りのスパンに含まれるようになります。
Infinite Tracingを設定するには、次のようにします。
- 上記の手順で、 distributed tracing を有効にしてください。
- トレースオブザーバーを作成する手順や、トレーススパンをInfinite Tracingのトレースオブザーバーに送信するアプリ(データソース)を選択する手順については、 Infinite Tracingのドキュメント をご覧ください。
Cross-Origin Resource Sharing(CORS)の有効化
異なるオリジンからのリソースを必要とするAJAXリクエストがある場合は、クロスオリジンリソース共有(CORS)を有効にすることができます。デフォルトでは、ブラウザのCORSセキュリティ制限のため、クロスオリジンリクエストの分散トレースは有効になっていません。分散トレーシングは、発信するAJAXリクエストにカスタムHTTPヘッダー(newrelic
、 traceparent
、 tracestate
)を追加することで実装されますが、ブラウザは通常、クロスオリジンのリクエストにカスタムヘッダーを許可しません。
エージェントバージョン1173のリリースでは、W3cのtrace contextヘッダー(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を有効にしてみてください。
クロスオリジンのリソース共有を可能にするために
他のオリジンのサービスが
newrelic
ヘッダーを受け入れるように設定されていることを以下の方法で確認してください。Access-Control-Allow-Headers: newrelic, traceparent, tracestate
(詳細は Risks and mitigations を参照してください)。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エージェントを再起動するか、コピー・ペーストによるブラウザのインストールを更新する)。
データを探す
データの検索と照会のためのヒント
エンドユーザーが発信したトレースは、 New Relic One の分散型トレース UI で見つけることができます。
分散トレースUIでは、エンドユーザースパンは
アイコン。
スパンの属性を見るには、UI で a span を選択します。
クエリのヒント
browserApp.name
にブラウザアプリ名を設定することで、ブラウザアプリ名での検索が可能になります。browserApp.name is not null のブラウザアプリのスパンを少なくとも1つ含むトレースのクエリ
.appName is not null
のバックエンドアプリを少なくとも1つ含むトレースのクエリ。- 前述の2つの条件を組み合わせて、ブラウザとバックエンドの両方のスパンを含むトレースを検索します。
トラブルシューティング
エンドユーザースパンが表示されない、またはその他の分散型トレースの問題がある場合は、 トラブルシューティング を参照してください。