SPAのデータ収集

このドキュメントでは、ブラウザが非同期シングルページアプリ（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 または replaceState のAPIが呼び出されます。ルートの変更は、 ブラウザUI の最初のページロードとともに表示されます。ルート変更のURLからハッシュフラグメントを受け取り、保存します。ハッシュを使用してプライベートなデータや機密データを渡している場合、そのデータは New Relic アカウントのユーザーから見える可能性があります。データの収集とレポートについての詳細は、 ブラウザのセキュリティ をご覧ください。## カスタムモニタリング [#api-custom-events][SPA API](/docs/browser/new-relic-browser/browser-agent-spa-api) を使用すると、デフォルトでは監視されないブラウザ インタラクションのカスタム監視を設定できます。また、この API を使用して、デフォルトの監視を無効にすることもできます。カスタムイベントは、 BrowserInteraction イベントとして保存され、以下の属性を持ちます。* カテゴリー 属性には、 カスタム という値が入ります。
• trigger 属性の値は api となります。(これはデフォルト値ですが、APIで変更可能です)。## 従来のページロードタイミングとの違い [#page-load-timing-diff]シングルページアプリのモニタリングに最適なデータを提供するために，ページロードのタイミングを新しい方法で測定しました．これにより、新しいビューに必要な変更を完了するのにかかる時間をより詳細に表現することができます。これは、従来のページロードタイミングの方法とは異なります。 従来のページロードタイミング では、 window.onload イベントの発火を利用して、ページがロードされたタイミングを判断しています。ウェブアプリケーションには、 window.onload イベントが発生した後、かなりの時間実行される非同期コードがあることが多いため、これはビュー変更タイミングを測定する最適な方法ではありません。

  ヒント

  Browser's standard, non-SPA Page views ページは、SPAモニタリングを有効にした場合とは異なるページロードタイムを表示します。SPA モニタリングはすべての非同期アクティビティを計測しているため、一般的に SPA のロードタイムは標準のページロードタイムよりも長くなります。
  従来の window.onload ページロードのタイミングは、SPA Page views ページにも表示されています。特定のページロードイベントを選択すると、 window onload がページロード時間チャートに赤い線で表示されます。また、 Switch to standard page views を選択すると、従来のロードタイミング表示に戻ることができます。## タイマー [#spa-timers]エージェントは、タイマーを含むすべての非同期呼び出しを監視します。持続時間が1秒未満のタイマーはラップされます。1秒以上のタイマーはラップされません。なぜなら、通常、これらのタイマーは、 非ウェブ・トランザクション 、ユーザー・インタラクションとは無関係なバックグラウンド・ワークやポーリングなどのために使用されるからです。## イベントと属性 [#event-data-structure]ルートの変更やページのロードにつながるブラウザのインタラクションは BrowserInteraction イベントとして、AJAXリクエストは AjaxRequest イベントとして保存されます。これらのイベントは、 クエリビルダ で問い合わせることができます。**