セッショントレース: ウェブページのライフサイクルの探索

New Relic Browser のセッショントレースは、最大10分間のウェブページ全体のライフサイクル中の読み込みやイベントの詳細な情報を提供します。ページ読み込みタイミング、個々のアセットのロード、ユーザーインタラクション、Ajax リクエスト、コールバック、エラー、その他のイベントが、タイムライン上に表示されます。そこでは、ウォーターフォール形式での詳細表示、ヒートマップの概要、関連すするセッションのメトリクスと問題のハイライト表示などがされます。

JavaScript エラーレポート機能を利用するには、PRO 以上のサブスクリプションレベルが必要となります。

問題の特定と解決策

セッショントレースは以下のことを理解する手助けになります。

  • DOM 読み込みの待ち時間、Ajax リクエストが完了するまでの待ち時間、ページにおけるユーザーとのインタラクションを含むページ読み込みに関してユーザーがどのような体験をしているのかの理解を手助けします。
  • メトリクスがユーザー体験をどのように反映しているかについての理解を手助けします。
  • 各イベントが発生したときに、他のイベントより時間が掛かっている JavaScript とブラウザのイベントシーケンスの理解を手助けします。
  • ボトルネックが発生している箇所とその原因についての理解を手助けします。
  • セッション中の個々のイベントのコンテキストを提供して、あるページが他のページよりなぜ遅くなるのかの理解を手助けします。

パフォーマストをユーザエクスペリエンスへ、インタラクションをパフォーマンスへと関連付けることにより、ユーザーセッションの全イベントを詳細で直感的なビジュアルを利用して、ピンポイントに問題領域特定し、容易に解決策を得ることを可能にします。

要件

New Relic Browser のセッショントレースを使うには、以下の要件を満たしている必要があります。

New Relic Browser は、リソースタイミング API [external link]をサポートしているブラウザからのみトレースをランダムにキャプチャします。

セッショントレースの選択

Session traces インデックスページには、選択したアプリの直近のトレースを最大20 個まで表示します。以下の情報を表示します。

  • 完全な URL。クエリパラメータ除く。
  • ブラウザ種別
  • 開始時日時
  • ページロード時間
Browser session traces index
Browser > Browser apps > (選択したアプリ) > Session traces: 一覧からセッショントレースを選択できます。New Relic Browser OverviewPage viewsJS errorsAJAX ページから直接、セッショントレースを選択することもできます。

セッショントレースを選択する方法は、以下のとおりです。

  1. New Relic のメニューバーから、Browser > Browser apps > (選択したアプリ) > Session traces を選択します。
  2. セッショントレースの日付や期間を変更したい場合は、タイムピッカーを利用します。
  3. 特定のタイプでトレースをフィルターしたい場合は、検索窓を使います。
  4. 詳細を確認したい場合は、セッショントレースのリンクをクリックします。
New Relic Browser OverviewPage viewsJS errorsAJAX ページから、セッショントレースを選択できます。

セッショントレースの詳細表示

セッショントレースの詳細ページでは、トレース、タイミング詳細付きのヒートマップ、探索可能なイベントのウォーターフォールに関する概要を示します。色付きの凡例により、ウェブページのライフサイクル中のページ読み込みのイベントを識別できます。

コピー&ペースの方法アプリをデプロイしている場合は、New Relic Browser には、ページ読み込みタイミングのプロセスの一環として、ネットワーク時間にはウェブアプリと処理待ち時間が含まれています。なぜなら、自動的に埋め込まれる Browser エージェントにサーバーアプリの値を渡す機能が、サーバーサイドのエージェントに依存しているためです。

ビューで詳細情報をみることで、ブラウザの視点で「バックエンド」処理の時間の内訳を確認できます。セッショントレースは、利用可能な全てのネットワーク関連のイベントをレポートします。そのため、ブラウザが DNS ルックアップやその他のネットワークイベントに費やしている時間を確認できます。

Browser session traces
Browser > Browser apps > (選択したアプリ) > Session traces > (選択したトレース): New Relic Browser のセッショントレースの詳細には、エンドユーザーの Web ページのセッションにおけるイベントを調べ、問題を特定するためのツールが含まれています。

セッショントレースへ移動するには、イベントスタックを縦スクロールしてウォーターフォールチャートを探し、個々のイベントを選択し、その詳細を確認します。

したいこと やること
セッショントレースのウェブページを表示する トレースのリンクを選択する
特定の時間にジャンプする タイムインジゲーターまたは、ヒートマップ上のイベントを選択する
個々のイベントの詳細を見る ウォーターフォールチャートでイベントを選択する。そこから、View full detail を選択する(利用可能な場合のみ)
セッショントレース上で位置を変更する ヒートマップ上でクリックするか、ウォーターフォールチャートで縦スクロールする
トレースを拡大、縮小する ヒートマップ下のプラス fa-plus アイコン、または、マイナス fa-minus アイコンを押す。
セッショントレースをシェアする フォーム、チケット、メール等、にペーストする パーマリンクを作る

処理の遅い JavaScript の実行と再描画

セッショントレースは、ブラウザのメインスレッド上の後続の呼び出しの実行をブロックしている JavaScript コード内における処理の遅いコールバックを識別するのに役立ちます。本来は、これらの呼び出しが素早く実行されることで、ブラウザがユーザーのアクションに即座に対応し、ページを再描画されるべきです。

セッショントレースは、33 ミリ秒以上かかるコールバックをハイライト表示します。短時間に連続して呼ばれた場合(例: requestAnimationFrame ループ内など)、33 ミリ秒以上のコールバックは、フレームレートを秒間 30 フレーム以下に下げます。このスピードは、ユーザーには遅く感じスピードです。