セッショントレース:ウェブページのライフサイクルを調査する
セッショントレース:ウェブページのライフサイクルを調査する

セッショントレース:ウェブページのライフサイクルを調査する

New Relic Browserのセッショントレースは、ウェブページのライフサイクル全体にわたって読み込みやインタラクションのイベントを詳細なタイムラインに表示します。ページの読み込みタイミング、個々のアセットの読み込み、ユーザーのインタラクション、AJAXリクエストやコールバック、エラー、そしてその他のイベントを滝グラフやヒートマップ上に詳細に可視化し、セッションに関連するメトリクスや問題をハイライトしたインタラクティブなタイムラインとして表示します。

この機能にアクセスできるかどうかは、サブスクリプションレベルによって異なります。

問題と解決策を見極める

セッショントレースは、下記の項目に対する理解を助けます:

  • DOM読み込み時間、AJAXリクエストが遂行されるまでの待ち時間、そしてページ状でのユーザーのインタラクションを含む、ユーザーのページ読み込みの体験
  • New Relicのメトリクスがエンドユーザー体験に与える影響
  • 他よりも処理に時間がかかっているJavaScriptとブラウザーイベントの処理の流れと、また各イベントがどのいつ実行されているか
  • ボトルネックがどこで起きているか、またその原因となりえる要素
  • セッション中の各イベントにおけるコンテキストを提供することで、あるページの読み込みが他のページよりも遅い理由を探る

パフォーマンスをユーザー体験やインタラクションと結びつけることで、ユーザーのセッション内の全てのイベントを詳細かつ直感的に表示しますので、問題の範囲を特定し、解決策を容易に見極めるために役立ちます。

要件

New Relic Browserのセッショントレースの機能の使用にあたっては、次の要件を満たしていることを確認してください:

  • お使いのNew RelicのエージェントのバージョンはNew Relic Browserをサポートしている必要があります。
  • 2014年の10月以前に作成されたアカウントについては、New Relic Browser、およびPro版の拡張機能を有効化する必要があります。

セッショントレースを選択する

セッショントレースのインデックスは、選択されたアプリの最も新しいトレースを最大20個まで表示します。これには次の項目が含まれます:

  • クエリのストリングパラメータが取り除かれたフルパスのURL
  • ブラウザーの種類
  • 開始された日付または時間
  • ページの読み込み時間

Browser > Browser アプリ > (選択されたアプリ) > セッショントレース:インデックスからセッショントレースを選択できます。また、セッショントレースはNew Relic BrowserのOverviewPageビューJS エラー、そしてAJAXの各ページからも直接選択することができます。
特定のセッショントレースを選択するには:

  1. New Relic のメニューバーから Browser > Browserアプリ > (選択されたアプリ)> セッショントレースを選択します。
  2. 異なる日付や時間帯からセッショントレースを探し出すためにはタイムピッカーを使ってください。
  3. 特定の種類のトレースに絞ってインデックスを表示させるには、検索ウインドウを使ってください。
  4. 詳細情報を見るには、セッショントレースのリンクを選択してください。
また、セッショントレースはNew Relic BrowserのOverviewPageビューJS エラー、そしてAJAXの各ページからも直接選択することができます。

セッショントレースの詳細を見る

セッショントレースの詳細ページでは、トレースに関する概要の情報、ヒートマップとタイミング詳細、またイベントを滝グラフで表示します。色分けされたレジェントは、ウェブページのライフサイクルの間のページの読み込みイベントを表示します。

コピー/ペーストでデプロイされたアプリに対して、New Relic Browserはウェブアプリおよびネットワーク時間内のキュー時間をページの読み込みタイミング処理の一部として含みます。これは、自動インジェクションを通じてBrowserエージェントにアプリケーションの値を渡す際には、New Relic Browserがサーバーサイドのエージェントに依存しているためです。

ブラウザーの視点からこの「バックエンド」の時間がどのようにブレイクダウンするかについての詳細な情報を見ることができます。セッショントレースは有効なネットワーク関連のイベントすべてに対してレポートしますので、ブラウザーがDNSルックアップや他のネットワークイベントの処理にどのように時間を使っているかをケースバイケースで見ることが可能です。


Browser > Browserアプリ > (選択されたアプリ) > セッショントレース > (選択されたトレース):New Relic Browserのセッショントレースの詳細を使ってイベントを調査することで、エンドユーザーのウェブページセッション中の問題を見極めることが可能です。

セッショントレースを見渡すには、イベントスタックを縦にスクロールして滝グラフを調査するか、または個々のイベントを選択して詳細を確認してください。

目的 手順
あるセッショントレースに対するウェブページを見る トレースのリンクを選択します。
特定の時間にジャンプする ヒートマップ上のタイムインジケーターまたはイベントを選択します。
個々のイベントの詳細を見る 滝グラフ上のイベントを選択し、項目があれば詳細を見るを選択します。
セッショントレース上のロケーションを変更する ヒートマップ上をクリックするか、滝グラフ上を縦にスクロールします。
トレース全体を拡大または縮小する ヒートマップの下部にある「+」または「ー」アイコンを選択します。
セッショントレースの情報を共有する パーマリンクを作成しフォーム、チケット、メールなどにペーストします。

実行の遅いJavaScriptと塗り替え

セッショントレースは、実行の遅い、またはブラウザーのメインスレッド上で続いて起こる呼び出しの実行を妨げるようなJavaScriptコード内のコールバックを見極めるために役立ちます。
セッショントレースは33ミリ秒以上のあらゆるコールバックをハイライトします。実行スピードの速い継承(例えばrequestAnimationFrameループ)でコールがあった場合は、33ミリ秒以上のコールバックはフレームレートを人にとって遅いと感じることの多い30fps以下に下げます。

関連情報

追加のドキュメンテーションリソースは次の通りです:
New Relicのオンライン テクニカル コミュニティでBrowserを使ったモニタリングについて議論しましょう!トラブルシューティングや質問をしたり、Java ScriptエラーのレポートAJAXタイミングの詳細を話し合うことができます。