リソースパフォーマンスの監視

リソースパフォーマンスの監視

RUM SDK は、すべての RUM ビュー (ページの読み込み) のリソースとアセットを収集します。XMLHttpRequest (XHR) と Fetch リクエストだけでなく、画像、CSS ファイル、JavaScript アセット、フォントファイルも収集します。RUM リソースイベントは、詳細なタイミングとメタデータとともに、それぞれに対して生成されます。

RUM リソースは、収集時にアクティブな RUM ビューに関連するすべてのコンテキストから継承します。

RUM リソースを APM トレースにリンクする

リクエストがスタックのレイヤー間を移動するときに、リクエストをさらに完全にエンドツーエンドで可視化するには、RUM データを対応するバックエンドトレースに接続します。これにより、次のことが可能になります。

  • ユーザーが直面するエラーの原因となったバックエンドの問題を特定する。
  • スタック内の問題によってユーザーが影響を受ける範囲を特定する。
  • フレームグラフで完全なエンドツーエンドのリクエストを確認する。これにより、RUM と APM の間をシームレスにナビゲートし、正確なコンテキストで戻ることができます。

この機能の設定については、RUM とトレースの接続を参照してください。

リソースタイミングとメトリクス

リソースの詳細なネットワークタイミングデータは、Fetch および XHR ネイティブブラウザメソッドと Performance Resource Timing API から収集されます。

属性 タイプ 説明
duration 数値 リソースのロードにかかった全時間。
resource.size 数値(バイト) リソースのサイズ。
resource.connect.duration 数値(ns) サーバーへの接続が確立されるまでにかかった時間 (connectEnd - connectStart)。
resource.ssl.duration 数値(ns) TLS ハンドシェイクにかかった時間。最後のリクエストが HTTPS 経由ではなかった場合、このメトリクスは収集されません (connectEnd - secureConnectionStart)。
resource.dns.duration 数値(ns) 最後のリクエストの DNS 名が解決されるまでにかかった時間 (domainLookupEnd - domainLookupStart)。
resource.redirect.duration 数値(ns) 後続の HTTP リクエストにかかった時間 (redirectEnd - redirectStart)。
resource.first_byte.duration 数値(ns) 応答の最初のバイトを受信するまでにかかった時間 (responseStart - RequestStart)。
resource.download.duration 数値(ns) 応答のダウンロードにかかった時間 (responseEnd - responseStart)。

: 一部のリソースの詳細なタイミングの収集に問題がある場合は、リソースタイミングと CORS を参照してください。

リソースの属性

属性 タイプ 説明
resource.type 文字列 収集されるリソースのタイプ (cssjavascriptmediaXHRimage など)。
resource.method 文字列 HTTP メソッド (POSTGET など)。
resource.status_code 数値 応答ステータスコード。
resource.url 文字列 リソースの URL。
resource.url_host 文字列 URL のホスト部分。
resource.url_path 文字列 URL のパス部分。
resource.url_query オブジェクト クエリパラメーターの key/value 属性として分解された、URL のクエリ文字列部分。
resource.url_scheme 文字列 URL のプロトコル名 (HTTP または HTTPS)。
resource.provider.name 文字列 リソースプロバイダー名。デフォルトは unknown となります。
resource.provider.domain 文字列 リソースプロバイダーのドメイン。
resource.provider.type 文字列 リソースプロバイダーのタイプ (first-partycdnadanalytics など)。

サードパーティのリソースを特定する

RUM は、リソース URL ホスト部分からリソースプロバイダーの名前とカテゴリを推測します。リソース URL ホストが現在のページ URL ホストと一致する場合、カテゴリは first party に設定されます。それ以外の場合、カテゴリは、たとえば cdnanalytics、または social になります。

リソースタイミングと CORS

Resource Timing API は、RUM リソースのタイミングを収集するために使用されます。これは、ブラウザがスクリプトに適用するクロスオリジンセキュリティ制限の対象となります。たとえば、Web アプリケーションが www.example.com でホストされており、images.example.com を介して画像をロードする場合、デフォルトでは、www.example.com でホストされてロードされたリソースのタイミングのみが取得されます。

これを解決するには、クロスオリジンリソースに Timing-Allow-Origin HTTP 応答ヘッダーを追加して、CORS の対象となるリソースの拡張データ収集を有効にします。たとえば、任意のオリジンにリソースタイミングへのアクセスを許可するには、Timing-Allow-Origin: * を使用します。CORS の詳細については、MDN Web ドキュメントをご覧ください。

その他の参考資料