セッションの痕跡Webページのライフサイクルを探る

Google の Session traces UIウェブページの全ライフサイクル中の負荷とインタラクションイベントの詳細なタイムラインを、最長 10 分間表示します。セッション URL またはセッショントレース ID を選択すると、詳細なウォーターフォールの視覚化とヒートマップの概要を使用してメトリクスを調べ、以下に関連する問題を特定できます。

ページ読み込みのタイミング
個々のアセットの読み込み
ユーザーインタラクション
AJAXリクエスト
コールバック
セッション中のエラーおよびその他のイベント

問題点と解決策の洗い出し

one.newrelic.com > Browser > (select an app) > Session tracesに移動します。セッションレースで探索できる豊富な情報の例を次に示します。

セッションの痕跡は、あなたが理解するのに役立ちます。

課題	これを行うには、セッショントレースデータを使用します。
バックエンドの問題	リクエストが開始されてから、バックエンドアクティビティが終了して DOM の読み込みプロセスが開始されるまでの時間を確認します。
ページ読み込みタイミングの問題	次のような質問に答えるのに役立つデータを探索します。ユーザーのページ読み込みエクスペリエンスはどうですか? DOM 処理または AJAX 要求が完了するまでにどのくらいの時間がかかりますか? あるページの読み込みが他のページより遅いのはなぜですか? セッション中の個々のイベントのコンテキストは何ですか?
コアWebバイタル	インタラクションが次のペイントを行うタイミングセグメントと最大のコンテンツペイントを調べて、コアウェブバイタルに影響を与えるパフォーマンスの問題を特定します。
JavaScript イベント	JavaScriptとブラウザーイベントのシーケンスを調べて、次のことを理解してください。どれが他のものより時間がかかりますか? 各イベントはいつ発生しますか?
エラー	エラーをソートまたはフィルタリングして、出現するパターンを確認します。たとえば、以下に基づいてエラーが増加するかどうかを確認できます。ブラウザの種類 (Google Chrome、Mozilla Firefox など) 特定のデバイスタイプ (デスクトップ、タブレット、モバイル)

パフォーマンスをユーザーエクスペリエンスに、インタラクションをパフォーマンスに結び付けることで、ユーザーセッション内のすべてのイベントを表示する機能は、問題領域を特定し、解決策を特定するのに役立ちます。パーマリンクを作成して、この情報を他のユーザーと共有することもできます。

始めましょう

セッショントレース機能を使用するには、ブラウザの監視にPro または Pro+SPA エージェントタイプを使用していることを確認してください。アプリに複数の名前を使用している場合、セッショントレースは最も具体的なアプリケーションにのみレポートされます。

ブラウザ監視は、 Resource Timing APIをサポートするブラウザからのみトレースをランダムにキャプチャします。セッショントレースはランダムにサンプリングされ、1 時間あたり 90 の割合で保存されます。一度に最大 500 のトレースをページ表示できます。

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

one.newrelic.com > All capabilities > Browser > (select an app) > Session traces: URL またはセッショントレース ID で検索するか、任意の列を並べ替えてから、リンクをクリックして対話型のセッショントレースの詳細を使用します。

特定のセッション・トレースを選択するには

one.newrelic.com > All capabilities > Browser > (select a browser app) > Session traces
に移動します。
インデックスを特定の URL またはセッショントレース ID に制限するには、検索ウィンドウを使用します。
他のパターンを探すには、任意の列の並べ替え順序を変更します。
セッショントレースリンクをクリックし、詳細ページを使用して詳細情報にドリルダウンします。

さらに詳しく分析するには、 session 、 sessionTraceId 、 largestContentfulPaintなどの属性をクエリすることもできます。詳細については、ブラウザ監視イベントデータに関するドキュメントおよびデータディクショナリを参照してください。

セッション・セグメントの定義

New Relic でコピー/貼り付け方法を使用してデプロイされたアプリの場合、ブラウザーの監視には、ページ読み込みタイミングプロセスの一部として、ウェブアプリとNetwork時間のキュー時間が含まれます。これは、ブラウザーの監視がサーバー側のエージェントに依存して、自動挿入によってアプリケーションの値をブラウザーエージェントに渡すためです。

ブラウザーの観点から、このバックエンド時間の内訳に関する詳細情報を表示できます。セッショントレースは、利用可能なネットワーク関連のすべてのイベントを報告するため、ブラウザーが DNS ルックアップやその他のネットワークイベントにどのように時間を費やしているかをケースバイケースで確認できます。

各セグメントの測定値は、セグメントが終了したセッションの長さを示します。たとえば、 Page loadが6.9sの場合、これは、リクエストの開始から 6.9 秒後にページ読み込みイベントが完了したことを意味します。

次の表では、セッショントレースの各セグメントについて説明し、これらの属性の詳細についてはデータディクショナリへのリンクを示します。

セッション・セグメント	説明
バックエンド	リクエストが開始されてから、バックエンドのアクティビティが終了し、DOMのロードが開始されるまでの時間です。
DOM処理	リクエストが始まってからDOMの処理が終わるまでの時間です。
ページロード	リクエストが開始されてから、ページロードイベントが発生するまでの時間です。
AJAXを待つ	リクエストが開始されてから、AJAXアクティビティが終了するまでの時間です。
First interaction	要求が開始されてから、マウスクリックやスクロールなどの最初のユーザーアクティビティが記録されるまでの時間。
次のペイントへのインタラクション (INP)	コアウェブバイタル: クリックやタップなどのユーザーのアクションに対して Web ページが視覚的にどの程度反応するかを測定します。
最大のコンテンツペイント	Core Web Vitals: ビューポートに表示される最大のコンテンツ要素のレンダリング時間。
間隔	セッションの合計時間です。

JavaScriptの実行と再描画が遅い

セッショントレースは、実行速度が遅く、ブラウザのメインスレッド上で後続の呼び出しの実行をブロックしているJavaScriptコードのコールバックを特定するのに役立ちます。これらのコールバックは、ユーザーのアクションに応じてブラウザが迅速にページを再描画するために、迅速に実行する必要があります。

セッショントレースでは、33 ミリ秒を超えるコールバックが強調表示されます。立て続けに呼び出された場合 ( requestAnimationFrameループ内など)、コールバックが 33 ミリ秒を超えると、フレームレートが 30 フレーム/秒未満に低下します。この速度は、ユーザーにとっては遅いように見えます。