New Relic Browser UI で SPA データの確認

この機能へのアクセス可否は、サブスリクプションレベルによります。SPA 監視機能は、New Relic Browser Pro のユーザーのみ利用可能です。

既に New Relic SPA (シングルページアプリ) 監視を利用している場合は、Browser の Page views ページに、SAP ルート変更と最初のページ読み込みのデータが表示されていることでしょう。

Browser SPA Page views page
Browser > (選択したアプリ) > Page views: SPA モニタリング監視している場合、Browser の Page views ページには、ルート変更や関連するに関する SPA のデータや非同期のブラウザアクティビティが表示されます。

シングルページアプリ (SPA) のデータ

SPA に関するデータを確認するには、New Relic のメニューバーから、Browser > (選択したアプリ) > Page views にアクセスします。

最初のページ読み込みとルート変更は、ブラウザのインタラクション名(セグメントシステムのホワイトリスト化を利用して調整可能です)によって、自動的にグループ分けされます。SPA API を使って、独自にルート名を設定している場合は、そのルート名が表示されます。また、Group page by のドロップダウンを利用して、ページ読み込みとルート変更のグループ化の方法を変更できます。

デフォルトでは、ページ読み込みとルート変更の一覧には、most time consuming views [最も時間を消費したビュー順]の多い順のリストが表示されます。Sort by ドロップダウンから、average response time [平均レスポンスタイム]、median response time [中央値のレスポンスタイム]、throughput per minute [一分辺りのスループット]を選択して、並び順を変更できます。

grouped URL から特定のビューを検索できます。Sort by ドロップダウンの下の検索バーに検索したいビューの名前を入力します。例えば、チェックアウトページを表す URL を見つけるには、checkout と入力します。

最初の Page view ページのチャートには、以下の情報が表示されます。

  • 平均レスポンスタイムの最も遅いビュートップ5
  • 最もスループットの高いビュートップ5

表示されている期間を変更したい場合は、ページ上部近くにある Time Picker を使います。 (過去 8日以上の期間を選択すると、フィルタリングやグループ化の機能は利用できないものもあります。)

SPA ビューの絞り込み

Browser SPA Page views page filter

Browser > (選択したアプリ) > Page views > Filter: Use the Filter を使うと、ルート変更、最初のページ読み込み、地域やブラウザ種別などのその他の属性で絞込が行えます。

最初のページ読み込みだけ、ルート変更だけを見たい場合は、Time Picker の右横にある Filter ドロップダウンを使います。例えば、ルート変更だけを見たい場合は、Filter を押し、Route change を選択します。

Filter を利用すると、ページ読み込みやルート変更のその他の属性、例えば、アプリ名、ブラウザの利用地域、ブラウザ種別などでフィルターすることもできます。例えば、オレゴン州ポートランドからのアクセスに対するページ読み込みとルート変更を見たい場合は、Filter を押し、ドロップダウンから、City を選択し、Portland を押します。

SPA ビューのグループ化

Group page by ドロップダウンを使うと、属性別にページビューをグループ化できます。例えば、ブラウザ種別毎に平均レスポンスタイムを比較したいとします。その場合は、Group page by を押し、ドロップダウンの選択肢から userAgent を選びます。

フィルタリングとグループ化を組み合わせることで、特定のデータを素早く探すことができます。例えば、ブラウザ別にある特定の URL の読み込み方法を比較したい場合は、以下のように操作します。

  1. Filter ドロップダウンから、targetURL を選択し、比較したい URL を選択します。
  2. Group page by ドロップダウンから、userAgent を選択します。

SPA ビューの詳細

Browser SPA Page views details

Browser > (選択したアプリ) > Page views > (選択したビュー): リストからビューを選択すると、各種詳細とその内訳が表示されます。

詳細を表示するには、個々のページ読み込みまたはルート変更を選択します。選択すると、時間がブラウザ対話のために費やされた場所の内訳を提供し、時刻ピッカーで選択したウィンドウに一致する時系列上でそのデータを表示します。ブラウザのインタラクションで消費した時間の内訳が表示されます。そして、タイムピッカーで選択している期間における時系列で、データをを表示します。

すべてのルート変更ビューは、理論的に最初のページ読み込みとなる可能性もあります。 (例えば、ルート変更の URL が他の何かに送信され、それらがその URL をロードすると、それは、New Relic への最初のページ読み込みとみなされます。)このため、SPA ビューの詳細ページには、最初のページ読み込みとルート変更の両方のチャートが表示されます。これによって、ビューが最初のページ読み込みとしてどのように実行しているかということと、ルート変更の場合のパフォーマンスを比較することができます。

3つチャートには、Avg initial page load time [最初のページ読み込み時間の平均] チャートのタイトルの右にあるアイコンがあり、表示を切り替えられます。デフォルトでは、色分けされた積み上げエリアチャートが表示されます。ヒストグラムパーセンタイルの折れ線グラフにも切り替えられます。

詳細ページの下部には、Throughput チャートがあり、最初のページ読み込みとルート変更を表示します。

以下は、ページ読み込みとルート変更の両方に表示されるパフォーマンスデータに関する説明です。

最初のページ読み込みのパフォーマンス詳細

最初のページ読み込みのパフォーマンス詳細には、バックエンドの平均処理時間、フロントエンドの処理時間、ウィンドウのロードイベントが含まれます。

  • Back end time [バックエンド時間] には、ネットワーク、ウェブアプリの処理時間、リクエスト処理待ち時間が含まれています。
  • Front end time [フロントエンド時間] みは、DOM 処理、ページ描画、全 XHR の完了までの時間が含まれています。
  • 垂直の赤いラインは、ウィンドウのロードイベントが発行されたタイミングを示しています。これは、SAP 監視機能が有効でない New Relic Browser が計測した通常のページ読み込みタイミングに相当します。SPA 監視を有効にしている場合は、通常、front end time が完了する前に、ウィンドウのロードイベントが発行されます。(SPA のページ読み込みタイミングと通常のページ読み込みタイミングの違いについては、SPA データコレクションについてをご覧ください。)
ルート変更のパフォーマンス詳細

ルート変更のパフォーマンス詳細には、JS の処理時間や待ち時間が表示されます。

  • JS Duration[JS の処理時間]は、同期処理であるインタラクション中の全 JavaScript の実行時間の合計です。
  • 残りの時間は Waiting time [待ち時間]と呼ばれ、合計時間から、JS の処理時間を引いた値となります。

Historical Performance タブと Breakdown タブは、ページ読み込みとルート変更の両方同じような内容が表示されます。

詳細タブ コメント
Historical Performance [過去のデータ] Historical Performance タブは、スループット (分あたりのビュー数) とレスポンスタイムを昨日と先週の同じ時間帯のデータと一緒にチャート形式で表示されます。
Breakdowns [内訳] Breakdowns タブには、インタラクションの一部として個別に時間を計測した様々なコンポーネントがリストされます。デフォルトで、全 XHR はキャプチャされ、計測されています。また、SPA API を使って、ルート変更やページ読み込み用に任意の要素を追加することができます。

関連情報

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