セッションリプレイデモ

セッションリプレイのデモアプリケーション は、プレーンな JavaScript で構築されたドキュメントエクスプローラーです。セッションリプレイのインストルメンテーションがいかに最小限で済むかを示しており、script タグ 1 つと初期化呼び出し 1 回だけで、すべてのユーザー操作を自動的に取得できます。

このリポジトリには 2 つのブランチが含まれています。

• main — 完全にインストルメントされており、すぐに使用できます
• pre-instrumented — インストルメンテーションを加えていないクリーンなバージョンで、どこに追加すべきかを示すコードコメントが付いています

このガイドでは、まず main ブランチを使ってセッションリプレイの動作を確認し、その後でインストルメンテーションコードを順に見ていきます。これにより、同じパターンを自分のアプリケーションにも適用できます。

セッションリプレイとは何か、また ClickStack においてどのような位置づけなのかについては、Session Replay 機能ページを参照してください。

• Docker と Docker Compose がインストールされていること
• ポート 3000、4317、4318、8080 が使用可能であること

リポジトリをクローンする

git clone https://github.com/ClickHouse/clickstack-session-replay-demo
cd clickstack-session-replay-demo

ClickStack を起動する

docker-compose up -d clickstack

API キーを取得する

1. http://localhost:8080 で HyperDX を開きます
2. 必要に応じて、アカウントを作成するかログインします
3. Team Settings → API Keys に移動します
4. インジェスト API キー をコピーします

5. 環境変数として設定します。

export CLICKSTACK_API_KEY='your-api-key-here'

デモアプリケーションを起動する

docker-compose --profile demo up demo-app

ブラウザで http://localhost:3000 を開き、アプリを操作します。トピックを検索し、カテゴリで絞り込み、コード例を表示し、項目をブックマークしてください。

すべての操作は ClickStack Browser SDK によって自動的に記録されます。

セッションリプレイを表示する

http://localhost:8080 の HyperDX に戻り、左側のサイドバーから Client Sessions に移動します。

継続時間とイベント数とともに、セッションが一覧に表示されるはずです。▶️ ボタンをクリックすると再生できます。

タイムラインの詳細度を調整するには、Highlighted モードと All Events モードを切り替えます。

このデモアプリケーションでは、セッションリプレイを有効にするのに必要なコードがごくわずかであることがわかります。必要なのは、アプリケーションに次の2点を追加するだけです。

1. SDK を追加する (app/public/index.html) :

<script src="https://unpkg.com/@hyperdx/browser@0.21.0/build/index.js"></script>

2. ClickStackを初期化する (app/public/js/app.js) :

window.HyperDX.init({
  url: 'http://localhost:4318',
  apiKey: window.CLICKSTACK_API_KEY,
  service: 'clickhouse-session-replay-demo',
  consoleCapture: true,
  advancedNetworkCapture: true,
});

それ以外はすべて通常のアプリケーションコードです。SDK は、ユーザー操作、コンソールログ、ネットワークリクエスト、エラーをすべて自動的に取得するため、追加のインストルメンテーションは必要ありません。

アプリを最初からインストルメントするには、pre-instrumented ブランチに切り替えます。

git checkout pre-instrumented

このブランチには、ClickStack のインストルメンテーションがまったく施されていない同じアプリケーションが含まれています。app/public/index.html と app/public/js/app.js のコードコメントには、上記 2 つのコードスニペットを正確にどこへ追加すればよいかが示されています。追加したら、デモアプリを再起動してください。すると、あなたの操作が ClickStack に表示されるようになります。

1. ブラウザのコンソールでエラーが出ていないか確認します
2. ClickStack が起動していることを確認します: docker-compose ps
3. API キーが設定されていることを確認します: echo $CLICKSTACK_API_KEY
4. Client Sessions ビューで時間範囲を調整します (過去 15 分を試してください)
5. ブラウザを強制再読み込みします: Cmd+Shift+R (Mac) または Ctrl+Shift+R (Windows/Linux)

API キーが正しく設定されていません。次の点を確認してください。

1. ターミナルで export CLICKSTACK_API_KEY='your-key' を実行してエクスポートした
2. エクスポートした同じターミナルでデモアプリを起動した
3. キーを HyperDX UI から取得した (ランダムに生成した文字列ではない)

サービスを停止します:

docker-compose down

すべてのデータを削除：

docker-compose down -v

• セッションリプレイ — 機能概要、SDK オプション、プライバシー制御
• Browser SDK リファレンス — SDK の全オプションと高度な設定
• ClickStack の利用開始 — ClickStack をデプロイし、最初のデータを取り込む
• サンプルデータセット一覧 — その他のサンプルデータセットとガイド