SPA2 モニタリングのしくみ

次の図は、JavaScript エージェントがエンドユーザ応答時間（EURT）メトリックの開始点と終了点を定義し、Ajax 要求、リソース、および JavaScript エラーに関連付けられる方法を示しています。

SPA モニタリング図

ステップブラウザのアクティビティJavaScript エージェントのアクション

ユーザは SPA のベースページに移動します。HTML スケルトン、コア CSS、および JavaScript がブラウザにロードされます。

Javascript エージェントは、ベースページのビーコンを送信します。

ベースページから、ユーザはボタンをクリックして製品を表示します。仮想ページは、以前にダウンロードしたコンテンツと Ajax 要求を通じて取得した新しいコンテンツを組み合わせてロードされるため、URL が変わります。

JavaScript は、仮想ページの開始時刻としてユーザアクションをマークします。

ユーザアクションとブラウザアクティビティは 5 秒間停止します。ブラウザのアクティビティには、リソース要求や Ajax コールの発信などが含まれます。

JavaScript エージェントまたは JavaScript API を使用するコードは、URL の変更後にブラウザアクティビティが最後に確認された時点の仮想ページの終了時刻をマークします。次に、JavaScript エージェントが仮想ページのビーコンを送信します。ただし、仮想ページのロードが 1 つの低速アクティビティで停止した場合、JavaScript エージェントは仮想ページの終了をマーキングする前に 8 秒間待機します。

仮想ページのロード中に発生した Ajax 要求、リソースロード、JavaScript エラーなどのアクティビティは、その仮想ページに関連付けられます。

一部のブラウザアクティビティは JavaScript にアクセスできません。たとえば、DOM の更新後、ブラウザが画面に DOM を表示する時間です。そのため、仮想ページがリソースを要求しない場合は、非常に高速な EURT（10 ミリ秒未満）が表示されることがあります。