ヘルプ APM RUM セッションリプレイ

セッションリプレイ

セッションリプレイにより、Webアプリケーションのユーザー動作をプレイバックできます。
これにより、ユーザーアクション、DOMイベント、コンソールイベント、リソース分析、問題、メモリ使用量を取得することで、エンドユーザー体感のトラブルシュートと向上に役立てられます。

目次

セッションリプレイ設定

アプリケーションのユーザーセッションを記録するには、RUMスクリプトでこの機能を有効化する必要があります。

次のカスタムAPIをRUMスクリプトに追加して、セッションリプレイ機能を有効にします。


s247r('recordSession',{
  "trackEvents": true,
  "trackConsoleEvents": true,
  "maskAllInput": true,
  "maskAllText": true,
  "collectNetworkDetails": true,
  "allowedNetworkUrls": [/.*/]
});

「recordSession」カスタムAPIの設定

設定 説明 デフォルト値
trackEvents ユーザーアクションイベントのキャプチャを有効にします。値をtrueに変更して、セッションリプレイでユーザーイベントをキャプチャします。 false
trackConsoleEvents コンソールイベントのキャプチャを有効にします。 false
maskAllInput キャプチャしたデータをすべてマスキングします。 true
maskAllText キャプチャ↓すべてのテキストをマスキングします。 true
collectNetworkDetails ネットワークイベント情報のキャプチャを有効にします。 false
allowedNetworkUrls どのURLをネットワークURLをキャプチャするための正規表現や正規表現パターンのリストです（例：[ /.*/ ]）。 N/A
allowedRequestHeaders キャプチャするリクエストヘッダーのリストです（例：[ 'Custom-header', 'Accept-language' ]）。 N/A
allowedResponseHeaders キャプチャする応答ヘッダーのリストです（例：[ 'Custom-header' ]）。 N/A

デフォルトで含まれるヘッダー：['Content-Type','Content-Length','Accept']

永続的に除外されているヘッダー：['authorization', 'x-forwarded-for', 'cookie', 'set-cookie', 'x-api-key', 'x-real-ip', 'remote-addr', 'forwarded', 'proxy-authorization', 'x-csrf-token', 'x-csrftoken', 'x-xsrf-token']

記録したセッションの表示手順

  1. Site24x7にログインします。
  2. ［RUM］に移動し、セッションリプレイを表示したいアプリケーションを選択します。
  3. ［セッションリプレイ］をクリックします。

記録したセッションがとともに次のメトリックが表示されます。

メトリック 説明
開始時間 セッションが開始したタイムスタンプです。
ユーザー名 ユーザーの名前です。
IPアドレス ユーザーセッションのIPアドレスです。
ブラウザー ユーザーが使用したブラウザーです。
デバイス デバイスのタイプ（例：Windows、Linux、モバイル）です。
ページロード回数 セッション中にロードされたページ数です。
エラー セッション中に発生したエラー数です。
AJAX呼び出し セッション中に行われたAJAXリクエスト数です。
表示時間 ユーザーがセッションを行った時間です。
  1. セッションをクリックして、より詳細なメトリックを表示します。

セッションリプレイのセッション詳細

この画面で、ユーザーアクション、エラー、パフォーマンスメトリックの内訳を表示します。

セッションリプレイ

レコーディング

レコーディングのタイムラインで、セッションの内容を可視化し、各色のマーカーでユーザーアクションを把握できます。
イベントタイプは次の色で、色分けされています。

  • 赤：エラーが発生したことを表します。
  • グレー：スクロールが発生したことを表します。
  • ダークブルー：フォーム入力などのユーザー入力アクションを表します。
  • ライトブルー：クリックイベントを表します。
  • 緑：ページロードイベントを表します。

上記の色分けにより、イベントのタイプと発生頻度を把握できます。

訪問したURL

セッション中にユーザーが接続したWebページを表示できます。［コピー］ボタンによりURLをコピーすることができます。

リプレイビデオ

リプレイビデオで、Webサイトやアプリケーションでのユーザーセッションのレコーディングを再生できます。れこにより、ユーザーアクションの可視化、問題の分析などを行えます。

プレイバックスピードは1、2、4、8倍速から選択でき、不要な期間の場合はスキップすることもできます。

タイムライン上をクリックすることで、セッションの特定の時点に移動できます。

ユーザーアクション

セッション中にユーザーにより行われたすべてのアクションを表示します。

  • アクション名：アクションタイプ（クリック、スクロール、ページロード、エラーなど）を表示します。
  • 名前：クリックしたボタン、入力フィールド、ロードされたWebページなど、ユーザーアクションに関連する特定の要素、URLを表示します。
  • 時間：アクションが行われた時間を表示します。
  • イベントタイプドロップダウンでイベントをフィルターできます。これによりクリックやスクロールなど特定のユーザーアクションにフォーカスできます。
  • さらに、検索バーを使用して、特定のHTML要素、エラーメッセージ、タイムスタンプに関連するイベントを検索できます。

DOMイベント

DOMイベントタブで、ユーザーセッション中に発生したDocument Object Model（DOM）イベントを表示します。

DOMイベントタブ
  • HTML要素：イベントに関連するHTML要素を表示します。
    例として、<elem id="data-source-selection-header">は、"data-source-selection-header"要素がクリックされたことを表します。
  • イベントタイプ：キャプチャされたDOMイベントタイプです。
  • 時間：イベントが発生したタイムスタンプです。
  • イベントタイプドロップダウンでイベントをフィルターできます。これによりクリックやスクロールなど特定のユーザーアクションにフォーカスできます。
  • さらに、検索バーを使用して、特定のHTML要素、エラーメッセージ、タイムスタンプに関連するイベントを検索できます。

コンソール

コンソールタブ

ユーザーセッション中に記録されたコンソールメッセージのログ情報を表示します。これにより、ユーザーセッションの技術的な指標を分析できます。Webアプリケーションんパフォーマンス問題の特定と解決に役立てられます。

  • イベントタイプドロップダウンで、エラー、警告、その他ログレベルのタイプでコンソールメッセージをフィルターできます。
  • 検索機能を使用して、キーワードやフレーズでコンソールログ内の特定のメッセージを検索できます。

Waterfalls

Waterfallsタブ

ユーザーセッション中にロードされたリソース（スクリプト、スタイルシート、画像）のリストを表示します。各リソース情報として、主にURL、タイプ、サイズ、平均応答時間が表示されます。
これにより、リソースがページロード時間にどのように影響しているか確認できます。

  • URL：リソースがリクエストしたエンドポイントです（例：APIコール、スクリプト、スタイルシート、イメージ）。
  • タイプ：リクエストのカテゴリーです（例：HTTP、スクリプト、CSS）。
  • サイズ：リクエストで転送されたデータ量がバイトまたはキロバイト単位で表示されます。
  • 平均応答時間：リクエストが完了するまでにかかった平均応答時間です。
  • イベントタイプドロップダウンで、コードスニペット、HTTPコール、イメージ、フォント、ソースマップといったタイプでネットワークリクエストをフィルターできます。これにより、ページパフォーマンスに影響を与えているリソースタイプを特定できます。
  • キーワードやフレーズ検索により、特定のネットワークリクエストを即時に把握でき、ロード問題のデバッグを容易に行えるようにします。

不具合

不具合タブ

ユーザーセッションで発生したエラーをキャプチャして表示します。JavaScriptエラー、ネットワーク障害、その他ユーザーに影響した問題といった様々な不具合の情報を表示します。

  • ページ上部のタイムラインで、セッション中に発生したエラーが赤い点で表示されます。
  • ユーザーアクションやその他イベント（スクロール、入力、クリック、ページロード）での関連エラーも他の色でここに表示されます。

メモリ

メモリタブ

ユーザーセッションのメモリ使用量を表示します。アプリケーションが消費しているメモリ量を把握し、潜在的なメモリリークなどを特定します。

  • 空きヒープメモリ：アプリケーションの空きメモリ量です。
  • 使用メモリ：アプリケーションが使用しているメモリ量です。

利用方法：

  • 使用メモリが増加し続けている場合、メモリリークが発生している可能性があります。
  • メモリ使用量の突発的な上昇は、アプリケーション内で重大なメモリが必要なイベントやアクションが発生したことを示します。

ネットワーク

ネットワーク

ユーザーセッション中に発生したネットワークリクエストを表示します。表示される次の情報をデバッグに利用できます。

  • URL：Webページでアクセスされたエンドポイントです。
  • ステータス：リクエストが成功したかどうかを表すHTTPステータスコードです（例：200「成功」、404「not found」）。
  • タイプ：AJAXやJavaScriptファイルといったリクエストタイプです。
  • サイズ：バイト単位の応答サイズです。
  • 時間：リクエストの処理にかかった時間です。

この項目で、ユーザーに影響を与えた遅いまたは失敗したネットワークリクエストを特定できます。

関連ガイド

ユーザーセッション