このドキュメントでは、ブラウザが非同期シングルページアプリ（SPA）のデータをどのように収集・保存するかを説明します。これにより、ブラウザの UI に表示される SPA データについての理解が深まります。また、 SPA API を使用して、より簡単にカスタム モニタリングを追加できるようになります。
ブラウザのインタラクション
SPA モニタリングの中心となるのは、 ブラウザインタラクション という概念です。New Relic では、ブラウザインタラクションをアプリユーザーのブラウザ内で発生するものと定義しています。
- ページの読み込みや経路の変更につながるユーザーの操作のこと。
- アプリのウィジェットを定期的かつ動的に更新する
ブラウザのインタラクションには、最初のトリガーとなるイベントだけでなく、AJAXリクエストや同期および非同期のJavaScriptなど、そのイベントによって引き起こされるアクティビティも含まれます。ブラウザインタラクションの原因だけでなく、その影響も追跡することで、ユーザーがアプリケーションのビューやルート変更をどのように体験しているかを把握することができます。
すべてのアプリケーションはそれぞれ異なり、モニタリングのニーズも異なります。そのため、デフォルトのモニタリングに加えて、任意のブラウザのインタラクションに対してカスタムモニタリングを設定できる機能も備えています。
SPAデータレポートの種類
シングルページアプリのデータは、大きく分けて3つのカテゴリーでNew Relicに報告することができます。
- 初期のページロード
- ルート変更
- SPA APIを介して作成されたカスタム ブラウザー インタラクション
これらはそれぞれBrowserInteractionイベントを作成します。1 つ以上の AJAX リクエストがインタラクションの一部である場合、関連するAjaxRequestイベントも作成されます。これらのイベントとその属性は、 クエリ ビルダーでクエリできます。
初期のページロード
最初のページの読み込みは、URL の完全な読み込みまたは再読み込みに起因する従来の URL の変更です。これは、ページ読み込みイベント ( window.onloadイベント) が発生したときにブラウザに示されます。最初のページの読み込みは、ブラウザ UIのルート変更とともに表示されます。
ルート変更
SPAのユーザーは、ページロードと同じように、ダイナミックなルート変更を体験します。 サイトやアプリの訪問者は通常、新しいビューがどのように 配信されたかは気にしません。ただ、アクションを実行すると新しいビューが表示されることを知っています。このような理由から、UIではルート変更をページロードと同様に扱います。
シングルページアプリケーションを最適に監視するために、理論的にはルート変更につながる可能性のある多くのブラウザのインタラクションの監視を開始します。
- **これらのインタラクションが ルートの変更につながらない場合、ブラウザはモニタリングを開始しますが、その後、それらを破棄します。**
- * これらのインタラクションがルートの変更につながる場合、ブラウザはインタラクション シーケンスを
BrowserInteractionイベントとして保存します。これには、同期アクティビティと非同期アクティビティの両方に関する情報が含まれます。
*次のいずれかが発生した場合、インタラクションはルート変更と見なされ、 BrowserInteractionイベントとして保存されます。 URL ハッシュが変更されます (通常はwindow.location.hashを使用)。
popstateイベントは、インタラクションに関連付けられたコールバック中に発生します。pushStateまたはreplaceStateAPI が呼び出されました。ルートの変更は、 ブラウザUI の最初のページロードとともに表示されます。ルート変更のURLからハッシュフラグメントを受け取り、保存します。ハッシュを使用してプライベートなデータや機密データを渡している場合、そのデータは New Relic アカウントのユーザーから見える可能性があります。データの収集とレポートについての詳細は、 ブラウザのセキュリティ をご覧ください。## カスタムモニタリング [#api-custom-events][SPA API](/docs/browser/new-relic-browser/browser-agent-spa-api) を使用すると、デフォルトでは監視されないブラウザ インタラクションのカスタム監視を設定できます。また、この API を使用して、デフォルトの監視を無効にすることもできます。カスタム イベントはBrowserInteractionイベントとして保存され、次の属性があります:*category属性の値はCustomになります。trigger属性の値はapiになります。(これはデフォルト値ですが、API で変更できます。)## 従来のページロードタイミングとの違い [#page-load-timing-diff]シングルページアプリのモニタリングに最適なデータを提供するために，ページロードのタイミングを新しい方法で測定しました．これにより、新しいビューに必要な変更を完了するのにかかる時間をより詳細に表現することができます。これは、ページ読み込みタイミングの従来の方法とは異なります。従来のページ読み込みタイミングでは、window.onloadイベントの発生を使用して、ページがいつ読み込まれるかを判断します。これは、ビュー変更のタイミングを測定する最適な方法ではありません。Web アプリには、window.onloadイベントの発生後、かなりの時間実行される非同期コードが含まれていることが多いためです。SPAページ ビューページには、従来のヒント
Browser's standard, non-SPA Page views ページは、SPAモニタリングを有効にした場合とは異なるページロードタイムを表示します。SPA モニタリングはすべての非同期アクティビティを計測しているため、一般的に SPA のロードタイムは標準のページロードタイムよりも長くなります。window.onloadページ読み込みタイミングが引き続き表示されます。特定のページ読み込みイベントを選択すると、ウィンドウのオンロードがページ読み込み時間グラフに赤い線で表示されます。[標準のページ ビューに切り替える]を選択して、従来の読み込みタイミング表示に戻すこともできます。## タイマー [#spa-timers]エージェントは、タイマーを含むすべての非同期呼び出しを監視します。持続時間が1秒未満のタイマーはラップされます。1秒以上のタイマーはラップされません。なぜなら、通常、これらのタイマーは、 非ウェブ・トランザクション 、ユーザー・インタラクションとは無関係なバックグラウンド・ワークやポーリングなどのために使用されるからです。## イベントと属性 [#event-data-structure]ルートの変更とページの読み込みにつながるブラウザ インタラクションをBrowserInteractionイベントとして保存し、AJAX リクエストをAjaxRequestイベントとして保存します。これらのイベントは、 クエリ ビルダーでクエリできます。**