![[アップデート] Amazon CloudWatch RUM にセッションリプレイ機能が追加され、ウェブアプリケーションのユーザー操作を動画のように再生できるようになりました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-d6a3bc85cad6419960fbda152152cd8c/ba5841cea06b96f4933878762028b090/amazon-cloudwatch?w=3840&fm=webp)
[アップデート] Amazon CloudWatch RUM にセッションリプレイ機能が追加され、ウェブアプリケーションのユーザー操作を動画のように再生できるようになりました
いわさです。
Amazon CloudWatch RUM（Real User Monitoring）はウェブアプリケーションやモバイルアプリケーションのクライアント側のパフォーマンスデータやエラーデータを収集・可視化するサービスです。
ページの読み込み時間や JavaScript エラー、HTTP エラーなどをリアルタイムに近い形で確認出来ます。
これまで CloudWatch RUM ではメトリクスやエラーログ、セッション情報などのデータは確認出来ましたが、ユーザーが実際にどのような操作をしてどこで問題に遭遇したのかを視覚的に把握するには、ユーザーからの報告内容をもとに自分で再現を試みる必要がありました。
これが今回のアップデートで、CloudWatch RUM にセッションリプレイ機能が追加されました。
ウェブアプリケーション上でのユーザーのクリック、スクロール、ページ遷移、エラー発生などの操作を動画のように再生出来る機能です。
追加料金なしで利用出来るとのこと。
また、テキスト入力やテキストコンテンツはデフォルトでマスクされるため、個人情報の保護にも配慮されているようです。
セッションリプレイは CloudWatch RUM がサポートされている全リージョンで利用可能で、東京リージョンでも使えます。
今回こちらを確認してみたので紹介します。
セッションリプレイを有効化してみる
では早速セッションリプレイを試してみましょう。
セッションリプレイの公式ドキュメントはこちらです。
アプリモニターの作成とセッションリプレイの有効化
まず CloudWatch RUM のアプリモニターを作成します。
今回は hoge-session-replay という名前で、ドメインに localhost を指定してローカルでの検証に使います。
なお、アプリモニター作成時のコンソール画面にはセッションリプレイ固有の設定項目はありません。
アプリモニター自体は通常どおり作成し、セッションリプレイの有効化はクライアント側のコードで行います。
RUM ウェブクライアントは NPM パッケージ aws-rum-web として提供されており、JavaScript モジュールとしてアプリケーションに組み込む形です。
公式ドキュメントでは RRWebPlugin を eventPluginsToLoad に追加する方法が紹介されていますが、aws-rum-web パッケージの full build（デフォルト）を使っている場合は telemetries に 'replay' を含めるだけで有効化出来ます。
Record a session replay using rrweb. By default all text and input content is masked to protect PII.
検証用に最小限のウェブアプリを用意しました。
フォーム入力、ボタンクリック、スクロール、意図的なエラー発生などの操作が出来るシンプルなページです。
以下が今回ローカルで動かしたサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RUM Session Replay テスト</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
h1 { color: #232f3e; }
button { padding: 10px 20px; margin: 10px 5px; cursor: pointer; }
#output { margin-top: 20px; padding: 10px; background: #f5f5f5; min-height: 50px; }
input { padding: 8px; margin: 5px; width: 200px; }
</style>
</head>
<body>
<h1>RUM Session Replay テストページ</h1>
<p>このページは CloudWatch RUM Session Replay の検証用サンプルです。</p>
<h2>フォーム入力テスト</h2>
<input type="text" id="nameInput" placeholder="名前を入力">
<input type="email" id="emailInput" placeholder="メールアドレス">
<button onclick="submitForm()">送信</button>
<h2>操作テスト</h2>
<button onclick="doClick()">クリックイベント</button>
<button onclick="doScroll()">スクロール</button>
<button onclick="throwError()">エラー発生</button>
<div id="output"></div>
<script>
function submitForm() {
const name = document.getElementById('nameInput').value;
const email = document.getElementById('emailInput').value;
document.getElementById('output').textContent = `送信完了: ${name} (${email})`;
}
function doClick() {
document.getElementById('output').textContent = 'クリックされました - ' + new Date().toLocaleTimeString();
}
function doScroll() {
window.scrollTo({ top: 800, behavior: 'smooth' });
}
function throwError() {
throw new Error('テスト用の意図的なエラー');
}
</script>
<script type="module" src="./rum-init.js"></script>
</body>
</html>
import { AwsRum } from 'aws-rum-web';
const config = {
sessionSampleRate: 1,
identityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
endpoint: 'https://dataplane.rum.ap-northeast-1.amazonaws.com',
telemetries: ['errors', 'performance', 'http', 'replay'],
allowCookies: true,
enableXRay: false
};
const awsRum = new AwsRum(
'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
'1.0.0',
'ap-northeast-1',
config
);
npm install aws-rum-web でパッケージをインストールし、import { AwsRum } from 'aws-rum-web' でインポートして使います。
ポイントは telemetries 配列に 'replay' を追加している部分です。
これだけでセッションリプレイのデータ収集が有効になります。
Vite の開発サーバー（npx vite）で localhost に配信し、ブラウザからアクセスしていくつか操作を行いました。
$ npx vite
VITE v6.4.2 ready in 91 ms
➜ Local: http://localhost:5173/
➜ Network: http://192.168.0.78:5173/
➜ press h + enter to show help
7:15:23 [vite] (client) ✨ new dependencies optimized: aws-rum-web
セッションリプレイの確認
操作を行ってから数分待ち、CloudWatch RUM コンソールでセッションリプレイを確認してみます。
アプリモニターの詳細画面に「Session replay」タブが追加されています。
セッション一覧にはセッション ID、Duration（期間）、Started（開始時刻）、Browser type、Device type が表示されています。
左側にはクイックフィルターがあり、ページ、ブラウザ、デバイス、国、リージョンでフィルタリング出来ます。
上部には「All sessions」「Sessions with errors」「Error-free sessions」のフィルターボタンもあり、エラーが発生したセッションだけを絞り込むことも出来ますね。
セッションを選択するとリプレイプレーヤーが開きます。
ユーザーの操作が動画のように再生されます。
右側にはタイムラインが表示されており、「Navigated to //」「Clicked on <input>」「Text input」「Clicked on <button>」などのイベントがタイムスタンプ付きで確認出来ます。
再生速度は 1x、2x、4x、8x から選択可能で、「skip inactive」をオンにすると操作がない期間をスキップ出来るみたいです。
上部にはセッションのサマリーとして「This session lasted 1 min 20.77 s with 2 JavaScript errors and 0 network errors.」のように、セッション時間とエラー数が表示されています。
エラーが発生したセッションを選んでリプレイすれば、エラー発生時にユーザーが何をしていたかを視覚的に確認出来るので、問題の再現が不要になりますね。
プライバシーとデータマスキング
公式ドキュメントによると、セッションリプレイではデフォルトですべてのテキスト入力とテキストコンテンツがマスクされるみたいです。
Session replay masks all text input and text content on the page by default. This includes form fields, labels, paragraphs, and any other text rendered in the DOM. Masked content appears as placeholder characters during playback, ensuring that personally identifiable information (PII) is not captured or stored.
実際にリプレイを再生してみると、ページ上のテキストがすべて *** のようなプレースホルダー文字で表示されており、入力した内容やページのテキストコンテンツが記録されていないことが確認出来ます。
見出しやボタンのラベル、フォームに入力した文字列など、DOM 上のテキストコンテンツがすべてマスクされています。
ページのレイアウトや要素の配置、ユーザーの操作（クリック位置やスクロール）は記録されつつ、テキスト内容は保護されている形ですね。
オプトインで有効化する機能であり、かつデフォルトでマスクが有効なので、プライバシー面は配慮されています。
なお、内部的には rrweb（record and replay the web）というオープンソースライブラリを使っているようです。
rrweb は DOM の変更を記録・再生するためのライブラリで、Sentry や Datadog などのオブザーバビリティサービスのセッションリプレイ機能でも採用されているみたいです。
マスクを無効化するオプションも rrweb 側には存在しそうですが、まだ私は検証できていないので誰か試してみてください。
さいごに
本日は Amazon CloudWatch RUM にセッションリプレイ機能が追加されたので確認してみました。
telemetries に 'replay' を追加するだけで有効化出来るので、既に CloudWatch RUM を使っているアプリケーションであれば導入は手軽だと思います。
アナウンスでは「追加料金なし」と謳われていますが、これはセッションリプレイ機能自体に別途の課金項目がないという意味で、有効化すると記録される RUM データイベント数は増えるため、通常の RUM イベント料金（10 万データイベントあたり $1）には影響があります。
サンプリングレートの調整は意識しておいたほうが良さそうです。
フロントエンドの問題調査で「ユーザーが何をしたか」を確認したいケースは多いので、活用の幅は広そうです。
