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

当社のブラウザモニタリングセッショントレースUI は、ウェブページのライフサイクル全体で、ロードイベントとインタラクションイベントの詳細なタイムラインを 10 分間にわたって提供します。セッション URL またはセッショントレース ID を選択したら、詳細なウォーターフォールの視覚化とヒートマップの概要を使用して、メトリックを調べ、以下に関連する問題を特定できます。

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

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

one.newrelic.com > ブラウザー > (アプリを選択) > セッショントレースに移動します。以下は、セッショントレースで探索できる豊富な情報の例です。

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

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

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

始めましょう

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScriptの実行と再描画が遅い

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