このドキュメントでは、ブラウザが非同期シングルページアプリ（SPA）のデータをどのように収集・保存するかを説明します。これにより、ブラウザの UI に表示される SPA データについての理解が深まります。また、 SPA API を使用して、より簡単にカスタム モニタリングを追加できるようになります。
ブラウザのインタラクション
SPA 監視の中心となるのはbrowser interactionの概念です。 New Relic は、 Google のヒューリスティックに基づいて、ブラウザ インタラクション (ソフト ナビゲーションとも呼ばれます) を次の一連のイベントとして定義しています。
- ユーザーインタラクションが発生します。具体的には、
click、keydown、またはsubmitイベントを検索します。History API からのpopstateイベントもインタラクションを開始します。 - URL は、パスであろうとハッシュであろうと、何らかの形で変更されます。
- ノード属性やテキストなどの変更は、ドキュメント DOM ツリーの任意の場所で発生します。
これらの手順に従うと、ブラウザ インタラクションは次の再描画フレームで終了したとみなされます。 また、XHR を関連付け、その範囲内で開始されたrequestsを取得します。 v2.1 では、さらに別のステップが導入されました:
- 新しい SPA (エージェント v1.298.0 以降) の場合、モニターは最大 5 秒間、長時間実行されるコールバックをチェックします。長時間実行されているコールバックが特定された場合、システムは現在のインタラクションを延長し、モニターを再実行します。
長いタスクがない状態が 5 秒間続くと、インタラクションは完全に終了します。最後に観察された長いタスクの終了までの延長期間中に発生する AjaxRequest および JavascriptError も、インタラクションに関連付けられます。重要なのは、インタラクションの継続時間には、最後の 5 秒間の非アクティブ時間は含まれないことです。
特定のシナリオでは、手順 4 が省略またはバイパスされる可能性があることに注意してください。
ヒント
popstateイベント トリガーは、ブラウザー内での特定の動作のため、他の UI イベント トリガーとは独自に管理されます。クリックなどの別の UI イベントの 500 ミリ秒以内にpopstateイベントが発生すると、そのイベントによって開始された既存のインタラクションにマージされますが、インタラクションの元のトリガー (「クリック」など) は変更されません。ただし、連続する 2 つのpopstateイベントは、この方法では結合されません。
popstateをトリガーとするインタラクションは、通常、戻るボタンや進むボタンの使用などのブラウザのアクション、またはプログラムによる URL の変更などのコード関連のアクションから発生します。
SPAデータレポートの種類
シングルページアプリのデータは、大きく分けて3つのカテゴリーでNew Relicに報告することができます。
これらはそれぞれBrowserInteractionイベントを作成します。1 つ以上の AJAX リクエストがインタラクションの一部である場合、関連するAjaxRequestイベントも作成されます。これらのイベントとその属性は、 クエリ ビルダーでクエリできます。
重要
デフォルトまたは非カスタムのインタラクションは、ネットワークrequestsが完了するのを待ちません。 これらは現状のままでインタラクションに関連付けられます。つまり、インタラクションがスケジューラによって収集される前に完了したrequestsのみが関連付けられます。 ネットワーク リクエストの所要時間が遅いか長い場合、それがインタラクションの一部として開始されると、この時間枠外になり、インタラクションに関連付けられないことがあります。
あるいは、 APIを使用して、インタラクションの期間を手動で延長し、重要なネットワーク リクエストが返されるまで開いたままにすることもできます。
初期のページロード
initial page load 、URL の完全な読み込みまたは再読み込みによって発生する従来の URL 変更です。これは、ページ読み込みイベント ( window.onloadイベント) が発生したときにブラウザに示され、ハード ナビゲーションとも呼ばれます。初期ページの読み込みは、ルートの変更とともにブラウザ UIに表示されます。
ルート変更
SPA ユーザーは、ページの読み込みと同様に動的なルート変更を体験します。 通常、サイトやアプリの訪問者は、新しいビューが配信されたかhowを気にしません。アクションを実行すると新しいビューが表示されることだけを知っています。 このため、ルートの変更は UI でのページの読み込みと同様に扱われます。
シングルページアプリケーションを最適に監視するために、理論的にルート変更につながる可能性のあるインタラクションの監視を開始します。
- これらのインターラクションが上で定義したヒューリスティックなステップを完了しない場合、エージェントは監視を開始しますが、その後それらを破棄します。
- これらのインタラクションがすべてのステップをdo実行した場合、エージェントはシーケンスを完了した
BrowserInteractionイベントとして保存します。
開始と終了の間で URL が変更された場合、インタラクションはルート変更とみなされ、 BrowserInteractionイベントとして保存されます。URL の変更は次の 2 つの方法で追跡されます。
popstateイベント。window.location.hashを設定するなど、プログラムで URL を変更すると、このイベントがトリガーされます。pushStateまたはreplaceStateが呼び出されます。SPA は通常、これらの History API メソッドを使用して URL を更新します。
ルートの変更は、 ブラウザUI の最初のページロードとともに表示されます。
エージェントはルート変更 URL からのハッシュ フラグメントを報告することに注意してください。ハッシュを使用して個人情報や機密データを渡すと、そのデータが New Relic アカウント ユーザーに表示される可能性があります。データの収集とレポートの詳細については、 「ブラウザのセキュリティ」を参照してください。
カスタムモニタリング
すべてのアプリは異なり、監視のニーズも異なります。SPA API使用すると、ブラウザのインターラクションをカスタマイズしたり、キャプチャ方法を自己定義したりできます。
カスタムイベントはBrowserInteractionイベントとして保存され、プロパティに次の違いがあります。
category属性の値はCustomになります。trigger属性の値はapiになります。(これはデフォルト値ですが、API で変更できます。)
上記のヒューリスティックがユーザー ベースまたはアプリに適合しない場合、API を使用すると、このようなカスタム インタラクションの開始と停止のタイミングを指示できます。
イベントと属性
ルート変更やページ読み込みにつながるブラウザ インタラクション、またはAPIを通じて作成されたものはBrowserInteractionイベントとして保存され、AJAX requests AjaxRequestイベントとして保存されます。 これらのイベントは、書き込みビルダーで行うことができます。