SPA データコレクションの理解

ここでは、New Relic がシングルページアプリ(SPA)のデータをどのように収集し、保存するかについて説明します。New Relic Browser UI で確認できる SPA データについての理解が深まることでしょう。 また、SPA API を使って、独自の監視を追加するのが簡単になるでしょう。

ブラウザのインタラクション

New Relic SPA 監視の肝は、ブラウザインタラクションの概念です。New Relic は、ユーザーのブラウザ上のアプリで起こるものとして、ブラウザのインタラクションを定義しています。例えば、ページ読み込みやルート変更に繋がるようなユーザー操作や、予定された処理、動的なウィジェットの更新などです。

ブラウザインタラクションには、最初に発行されるイベントだけでなく、AJAX リクエストや非同期、同期に関わらず JavaScript によるイベントによって発生するアクティビティも含まれています。ブラウザのインタラクションの原因だけでなく、効果も追跡することにより、ユーザーがアプリケーションのビューやルート変更をどのように感じているかの体験についての情報を提供します。

もちろん、どのアプリも異なっていおり、必要な監視も異なっています。そのため、New Relic はデフォルトでは、特別な設定なしでも監視を開始しますが、必要に応じて独自の監視の設定も行えるようになっています。

シングルページアプリのデータの主要な以下の3つのカテゴリが、New Relic に送信されます。

  • 最初のページ読み込み
  • ルート変更
  • SPA API を利用して作成されたカスタムのブラウザインタラクション

これらは BrowserInteraction イベントを生成します。1つ以上の AJAX リクエストが、インタラクションの一部である場合、関連する AjaxRequest イベントも生成されます。これらのイベントとその属性は New Relic Insights から利用することができます。

最初のページ読み込み

最初のページ読み込みは、URL の完全な読み込み、再読み込みに起因する従来の URL 変更を意味します。これは、ページロードイベント(window.onload イベント)が発行されたことを示しています。

最初のページ読み込みは、New Relic Browser UI においてルート変更と共に表示されます。

ルート変更

シングルページアプリのユーザーは、ページ読み込みと同じような方法で動的なルート変更を体験します。
サイトやアプリの利用者は、通常、どのように新規のビューが表示されたのかは気にしません。単にアクションを起こすと新しいビューが表示されていることだけを分かっています。よって、New Relic は、ルート変更を UI のページが読み込み同じように扱っています。

シングルページアプリを正確に監視するために、理論上ルート変更に繋がるとされる多くのブラウザのインタラクションの監視を開始します。これらのインタラクションが、ルート変更に繋がらなかった場合、New Relic Browser は監視は開始しますが、その後、破棄します。一方、ルート変更に繋がった場合は、一連のインタラクションを BrowserInteraction として保存します。そこには、同期、非同期の両方のアクティビティが含まれています。

以下のどちらかが発生した際に、インタラクションはルート変更とみなされ、BrowserInteraction として保存されます。

  • URL ハッシュの変更 (通常は、window.location.hash)
  • インタラクションに関連したコールバック中における popstate イベントの発行
  • pushState または replaceState API の呼び出し

ルート変更は、New Relic Browser UI に最初のページ読み込みと一緒に表示されます。

New Relic は、ルート変更の URL からハッシュフラグメントを収集し、保存します。もし、ハッシュにプライベートなデータや個人情報に関する情報を含めている場合は、そのデータは、同じ New Relic アカウントのユーザーから見られることになることを気を付けてください。New Relic Browser が収集するデータや送信するデータにに関しての詳しい情報は、New Relic Browser のセキュリティをご覧ください。

カスタム監視

New Relic SPA API を使うことで、デフォルトでは監視対象とならないブラウザのインタラクションをカスタム監視として追加できます。また、API を使って、デフォルトの監視対象を無効にすることもできます。

カスタムイベントは、BrowserInteraction イベントとして保存され、以下の属性を含みます。

  • category 属性は Custom の値を持ちます。
  • trigger 属性は api の値を持ちます。 (これはデフォルト値ですが、API を使って変更できます)

従来のページ読み込みタイミングとの違い

シングルページアプリの監視に最適化されたデータを提供するために、New Relic は、ページ読み込み時間を測定するための新しい方法を採用しています。同期、非同期の両方の低レベルのブラウザ機能をラップしています。新しいビューへの変更が完了するまでの時間を、より正確に計測するための施策です。

これは、従来のページ読み込みタイミングの計測方法とは異なります。従来は、ページ読み込みの完了を判断するために、window.onload イベントの発行を利用していました。最近のウェブアプリの多くは、window.onload イベントが発生した後、非同期コードの実行完了に多くの待ち時間が発生しています。よって、従来の方法は、ビューの変更タイミングを測定する最適な方法とは言えません。

ブラウザ標準、SPA 以外の Page views には、SPA 監視が有効なときとは、異なったページ読み込み時間が表示されます。なぜなら、SPA 監視は、非同期の全アクティビティを計測しているため、SPA ロード時間は通常、標準のページ読み込み時間より長くなります。

SPA ページビューでは、従来の window.onload ベースのページ読み込みタイミングの計測は、まだ表示されています。特定のページロードイベントを選択すると、Window onload がページ読み込みタイミングチャート上に赤いラインとして表示されます。

タイマー

New Relic エージェントは、タイマーを含む全非同期コールを監視します。1秒未満のタイマーはラップされます。通常、タイマーはユーザーインタラクションに無関係なバックグラウンドタスクやポーリングを目的に利用されることが多いので、1秒より長いタイマーはラップされません。

イベントと属性

New Relic はルート変更やページ読み込みに繋がるブラウザのインタラクションを BrowserInteraction イベントとして、AJAX リクエストを AjaxRequest イベントとしてそれぞれ保存します。これらのインベントは、New Relic Insights で問い合わせができます。

BrowserInteraction の属性と AjaxRequest の属性の完全な項目リストを確認するには、Insights 用の Browser のデフォルト属性 をご覧ください。

関連情報

関連する情報は以下のとおりです。

  • SPA 互換性と要件 (New Relic におけるシングルページアプリを利用するための技術的な要件)
  • Browser に SPA データの表示 (New Relic Browser UI でどのようにデータが表示されるかについての説明)
  • SPA API (シングルページアプリでカスタム計測を行うための API メソッド)