シングルページアプリケーションの監視の概要

シングルページアプリケーション(SPA)は、単一のHTMLページを読み込むウェブアプリケーションです。このアプリケーションは、ボタンのクリックやリクエストの送信などのユーザーの操作に応じて、ページ全体を再読み込みすることなく動的に更新します。

BrowserのSPAモニターは、シングルページアプリケーションでのリアルユーザーエクスペリエンスに対し、より高い可視性と実用性のある洞察を提供します。またSPAの監視は、AJAXリクエストを使用してコンテンツを動的に呼び出し、流れるようなユーザーエクスペリエンスを生み出すアプリケーションにとって非常に有益です。

また、モニタリングのルート変更が簡単なだけでなく、Browser モニタリングのSPA APIを使用することで、ブラウザ内で実行されるあらゆる内容をモニタリングできます。これにより、開発者とそのチームは次のことが可能になります。

  • 読み込みや反応が早く、非常にインタラクティブなアプリケーションを作成します。
  • リアルユーザーが体験しているスループットやパフォーマンスを監視します。
  • ページ読み込みに関連した問題をトラブルシューティング・解決します。
  • データのクエリを行い、ビジネスの決定を支援します。
  • 優れたアプリケーションを迅速に市場に投入します。

SPAの監視を有効にする

SPAモニターをインストールする前に、SPAの互換性と要件をお読みください。シングルページアプリケーションの監視にアプリケーションを追加するをご覧ください。

スループットとパフォーマンスのデータを分析する

当社はページロードタイミングのインストゥルメンテーションに関するこれまでの業界標準に改善を加え、ページ読み込みとルート変更に関連する同期・非同期両方のアクティビティにおける全体像を提供します。

browser_SPA.png
one.newrelic.com > Browser >(アプリケーションを選択) > ページビュー: BrowserモニタリングのSPAモニターを使用して、SPAアーキテクチャアプリケーションのスループットやパフォーマンスを調べることができます。

Browserでは、次のSPAデータをモニターできます。

  • ページ読み込みとルート変更時のパフォーマンスデータとスループット
  • AJAXリクエストのデータ
  • JavaScriptアクティビティ(同期・非同期の両方)
  • SPA APIを使用してモニターされる動的なページの更新

このデータによって、ユーザーがどのようにアプリケーションのページ読み込みやルート変更を体験しているかについて理解を深めるとともに、ボトルネックの解消やエラーのトラブルシューティングが可能になります。New RelicによるSPAデータの処理方法については、SPAデータの収集を理解するをご覧ください。

Browser SPAの機能

以下は、SPAの監視機能の要約です。

シングルページアプリケーションの監視 これらの機能を活用する
BrowserのUIの堅牢なビュー

ユーザーがページ読み込みまたはルート変更を初期化すると、New Relicはそれに続くすべてのJavaScriptを監視し、すべてのAJAXイベントが完了すると時間計測を終了します。こうすることで、ウィンドウの読み込みイベントが発火すると時間計測を終了する従来の方法と比べて、ユーザーに対してページの準備が実際に完了した状況のより正確な表示が提供されます。

SPAモニターを有効にすると、Browser内のページ表示ページには、アプリケーションの使用レベル(スループット)とユーザーエクスペリエンス(パフォーマンス)に関する、次を含むイベント駆動型データが表示されます。

  • 初回のページロードパフォーマンス、ルート変更、また過去のパフォーマンスに関するドリルダウン詳細を含むチャート
  • カスタムアトリビュートを含む、並び替え、検索、フィルタリングのオプション
  • 初回のページロードとルート変更のすべてに関する追加のAJAXの内訳データ

SPAモニタリングが既存のBrowserアカウントのデータ利用に与える影響の説明については、SPAとBrowserデータの利用を参照してください。

データエクスプローラーによるデータ解析 データエクスプローラーは、次の3つのSPA特定のイベントタイプをサポートします。BrowserInteractionAjaxRequestBrowserTimingクエリビルダーでこれらのイベントをクエリしてアプリケーションのパフォーマンスを分析し、ビジネス上の意思決定を行うことができます。
APIからのカスタマイズされたデータ SPA APIを使用することで、カスタムネーミングやカスタムタイミング、finishline API、またその他のカスタムアトリビュートといった特定の必要なデータを取得することができます。

その他のヘルプ

その他のドキュメンテーションには、以下の資料があります。

さらに支援が必要な場合は、これらのサポートと学習リソースを確認してください: