ClickStack のセッションリプレイは、Web アプリケーション内でのユーザー操作を記録・再構成し、セッション中にユーザーが実際に見て何をしたのかを、そのまま視覚的に再生できるようにします。動画を録画するのではなく、SDK は DOM の変更、マウスの動き、クリック、スクロール、キーボード入力、コンソールログ、ネットワークリクエスト (XHR、Fetch、WebSocket) 、JavaScript の例外を記録し、その体験をブラウザ内で再構成します。
セッションリプレイは、ログ、トレース、メトリクスとともに ClickHouse に保存されるため、ユーザー体験を確認してから、それを支えたバックエンドのトレースやデータベースクエリの調査まで、すべて数回のクリックで行えます。これにより、セッションリプレイは本番環境の問題のデバッグ、ユーザー行動の把握、UX 上のつまずきポイントの特定、さらにサポートに報告された問題の視覚的な確認に役立ちます。
ClickStack は OpenTelemetry と完全に互換性があるため、標準の OpenTelemetry JavaScript SDK または任意の ClickStack language SDKs を使用して、ブラウザのテレメトリー (トレース、例外) を送信できます。ただし、セッションリプレイには ClickStack Browser SDK (@hyperdx/browser) が必要です。これは、セッション記録、コンソールキャプチャ、ネットワークリクエストのキャプチャ機能を OpenTelemetry SDK に拡張したものです。セッションリプレイが不要でトレースだけが必要な場合は、OTel 互換の任意のブラウザ SDK を ClickStack で利用できます。
以下の例では ClickStack Browser SDK を使用します。アプリケーションにセッションリプレイを追加するには、パッケージをインストールし、SDK を初期化するだけで完了します。あとは、すべてのユーザー操作が自動的にキャプチャされるため、追加のコード変更は不要です。
SDK は、アプリの起動時に確実に読み込まれる場所で初期化してください。たとえば Next.js アプリケーションであれば、ルートの layout.js が該当します。これによりセッション記録がすぐに開始され、ユーザー体験全体をキャプチャできます。
npm install @hyperdx/browser
import HyperDX from '@hyperdx/browser';
HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // Managed ClickStack の場合は省略
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
yarn add @hyperdx/browser
import HyperDX from '@hyperdx/browser';
HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // Managed ClickStack の場合は省略
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
バンドラを使用しないアプリケーションでは、スクリプトタグで SDK を直接読み込んでください。これによりグローバル変数 HyperDX が公開され、NPM パッケージと同じように使用できます。<script src="https://unpkg.com/@hyperdx/browser@0.21.0/build/index.js"></script>
<script>
window.HyperDX.init({
url: 'http://your-otel-collector:4318',
apiKey: 'YOUR_INGESTION_API_KEY', // Managed ClickStack の場合は省略
service: 'my-frontend-app',
tracePropagationTargets: [/api.myapp.domain/i],
consoleCapture: true,
advancedNetworkCapture: true,
});
</script>
tracePropagationTargets オプションは、セッションリプレイをバックエンドのトレースと関連付けるうえで重要です。これを API ドメインに設定すると、フロントエンドからバックエンドまでの完全な分散トレーシングを有効にできます。プライバシー制御、custom actions、React エラーバウンダリ、ソースマップなどを含む SDK オプションの一覧については、Browser SDK reference を参照してください。tracePropagationTargets 設定が traceparent ヘッダーを介してブラウザのスパンとサーバーのスパンを関連付け、ユーザーのクリックからデータベースに至るまで一貫した分散トレースを構築するためです。フロントエンドとバックエンドの両方をインストルメントする方法を含め、実際の手順を詳しく知りたい場合は、OpenTelemetry と ClickStack による NextJS アプリケーションのインストルメントを参照してください。
この相関は逆方向にも機能します。Search ビューでトレースを表示している際にそのトレースをクリックして詳細を開き、Session replay タブを選択すると、そのトレース発生時にユーザーが実際にどのような操作をしていたかを確認できます。これは、エラーやリクエスト遅延を調査する際に特に有用です。バックエンド側の問題から調査を始めて、すぐにユーザー視点の状況を確認できます。
セッションリプレイのデータは、ログやトレースとは別に、ClickHouse 内の専用の hyperdx_sessions テーブルに保存されます。各セッションイベントは 1 行として保存され、イベントのペイロードを含む Body フィールドと、イベントのメタデータを格納する LogAttributes マップを持ちます。Body と LogAttributes の両カラムには、リプレイの再構築に使用される実際のセッションイベントの詳細が格納されます。
テーブルスキーマの詳細については、ClickStack で使用されるテーブルとスキーマ を参照してください。
セッションリプレイを実際に確認する方法は 2 つあります。
