導入
背景
- 2026年5月1日のアップデートにより、Amazon CloudWatch RUM でセッションリプレイ（Session Replay）がサポートされるようになりました。
- この機能により、ユーザーがブラウザ上で行ったクリック・スクロール・ページ遷移・エラーを動画のように再現でき、問題を自ら再現しなくてもフロントエンドの不具合を視覚的に診断できます。
- 本ブログでは、Session Replay の概要を解説したうえで、実際に機能を有効化してセッションを記録・確認するまでの手順を紹介します。
本記事の目的
- Session Replay を有効化することで、サーバーサイドのログには現れないフロントエンド固有のエラーを素早く特定できることを解説します。
対象読者
- CloudWatch RUM の基本的な概念（RUM アプリモニターの作成など）を把握している方を想定し、基礎的な AWS サービスの解説は割愛します。
CloudWatch RUM Session Replay の概要
CloudWatch RUM は、ウェブアプリケーションおよびモバイルアプリケーションのクライアント側パフォーマンスメトリクスやエラーデータを収集するサービスです。
Session Replay はその拡張機能として、ユーザーのブラウザ操作をそのまま再生できます。
具体的には以下の操作をキャプチャします。
- クリック
- スクロール
- ページ遷移
- JavaScript エラー
なぜ Session Replay が必要なのか
従来の CloudWatch RUM でも、エラー件数やページロード時間などのメトリクスは取得できていました。しかし、「どのような操作の流れでエラーが発生したか」「ユーザーがどこでつまずいて離脱したか」といった文脈情報は、メトリクスだけでは把握が困難でした。
Session Replay を活用することで、以下のようなシナリオへの対応が格段に容易になります。
- ユーザーから「ボタンを押しても何も起きない」と報告された際の原因特定
- フォームのレンダリング失敗など、サーバー側ログに現れない UI 不具合の調査
Session Replay の有効化手順
前提条件
- AWS CDK の実行環境が整っていること
手順
1. CDK でアプリモニターを構築する
以下の CDK スタックで、Cognito Identity Pool と CloudWatch RUM アプリモニターを一括構築しています。
import { Stack, StackProps } from "aws-cdk-lib";
import { Construct } from "constructs";
import { aws_rum as rum, aws_iam as iam } from "aws-cdk-lib";
import { IdentityPool } from "@aws-cdk/aws-cognito-identitypool-alpha";
import { NagSuppressions } from "cdk-nag";
export class RumStack extends Stack {
constructor(scope: Construct, id: string, props?: StackProps) {
super(scope, id, props);
// RUM クライアントの未認証アクセス用
const identityPool = new IdentityPool(this, "IdentityPool", {
allowUnauthenticatedIdentities: true,
});
const guestRole = identityPool.unauthenticatedRole;
const appMonitorName = "rum-session-replay-demo";
new rum.CfnAppMonitor(this, "AppMonitor", {
name: appMonitorName,
domain: "localhost",
appMonitorConfiguration: {
identityPoolId: identityPool.identityPoolId,
guestRoleArn: guestRole.roleArn,
sessionSampleRate: 1,
telemetries: ["performance", "errors", "http"],
allowCookies: true,
enableXRay: true,
},
cwLogEnabled: true,
});
// ゲストロールに RUM イベント送信を許可
guestRole.addToPrincipalPolicy(
new iam.PolicyStatement({
effect: iam.Effect.ALLOW,
actions: ["rum:PutRumEvents"],
resources: [
`arn:aws:rum:${this.region}:${this.account}:appmonitor/${appMonitorName}`,
],
}),
);
NagSuppressions.addStackSuppressions(this, [
{
id: "AwsSolutions-COG7",
reason:
"RUM クライアントが未認証ユーザーのイベントを送信できるよう、意図的に未認証 ID を許可している",
},
]);
}
}
2. RUM スニペットをウェブアプリに組み込む
CloudWatch RUM コンソールの対象アプリモニター → 設定 → コードスニペット → HTML から、スニペットを取得します。
取得したスニペットをそのまま使用するのではなく、以下の 2 点を変更 してください。
① cwr.js のバージョンを 3.x に変更する
Session Replay は aws-rum-web バージョン 3.0 で追加された機能です。執筆時点（2026年5月）では、コンソールが生成するスニペットは古いバージョンを指しているため、URL を書き換えます。
// 変更前（コンソールが生成するバージョン例）
'https://client.rum.us-east-1.amazonaws.com/1.19.0/cwr.js'
// 変更後
'https://client.rum.us-east-1.amazonaws.com/3.x/cwr.js'
② telemetries に "replay" を追加する
コンソール生成のスニペットには Session Replay の設定が含まれていません。telemetries 配列に "replay" を追加することで有効化されます。
// 変更前
telemetries: ["performance", "errors", "http"]
// 変更後
telemetries: ["performance", "errors", "http", "replay"]
動作確認
実際にサンプルアプリへのアクセスを行い、Session Replay が取得されることを確認します。
- RUM スニペットを組み込んだウェブアプリをブラウザで操作する（クリック・フォーム入力など）
- 数分後、CloudWatch コンソールの対象アプリモニター → [Session Replay] タブを開く
- 操作したセッションが一覧に表示され、再生できることを確認する
なお、Session Replay はデフォルトで テキスト・入力フィールドをすべてマスク する仕様となっており、再生画面でもメールアドレスや問い合わせ内容などの入力値は伏字で表示されます。プライバシー保護がデフォルトで有効なため、個人情報を含むフォームにそのまま導入できます。
おわりに
Session Replay を有効化することで、フロントエンドの問題調査が「ログを眺める作業」から「操作を見直す作業」へと変わり、根本原因への到達が大幅に速くなります。
追加料金なし・オプトインという導入しやすい設計も魅力です。すでに CloudWatch RUM を利用しているチームであれば、まず試してみる価値は十分にあります。
本番環境へ展開する際は、sessionSampleRate の値に注意してください。今回の検証では 1（全セッション記録）に設定しましたが、トラフィックの多い環境でそのまま使用すると記録量・コストが大きくなります。0.1（10% サンプリング）など、運用規模に合わせた値に調整することを推奨します。
参考
アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。
Discussion