メインコンテンツへスキップ
要点このガイドでは、ClickStack Browser SDK を使用して、セッションリプレイ用に Web アプリケーションをインストルメントする手順を説明します。事前生成済みのデータを読み込む他のサンプルデータセットとは異なり、このデモでは、実際に操作しながらセッションデータを生成できる対話型アプリケーションを使用します。所要時間: 10～15 分

​
概要

セッションリプレイのデモアプリケーション は、プレーンな JavaScript で構築されたドキュメントエクスプローラーです。セッションリプレイのインストルメンテーションがいかに最小限で済むかを示しており、script タグ 1 つと初期化呼び出し 1 回だけで、すべてのユーザー操作を自動的に取得できます。 このリポジトリには 2 つのブランチが含まれています。
  • main — 完全にインストルメントされており、すぐに使用できます
  • pre-instrumented — インストルメンテーションを加えていないクリーンなバージョンで、どこに追加すべきかを示すコードコメントが付いています
このガイドでは、まず main ブランチを使ってセッションリプレイの動作を確認し、その後でインストルメンテーションコードを順に見ていきます。これにより、同じパターンを自分のアプリケーションにも適用できます。 セッションリプレイとは何か、また ClickStack においてどのような位置づけなのかについては、Session Replay 機能ページを参照してください。

​
前提条件

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

​
デモを実行する

1

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

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

​
ClickStack を起動する

docker-compose up -d clickstack
3

​
API キーを取得する

  1. http://localhost:8080 で HyperDX を開きます
  2. 必要に応じて、アカウントを作成するかログインします
  3. Team Settings → API Keys に移動します
  4. インジェスト API キー をコピーします
  1. 環境変数として設定します。
export CLICKSTACK_API_KEY='your-api-key-here'
4

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

docker-compose --profile demo up demo-app
このコマンドは、CLICKSTACK_API_KEY 変数を export したのと同じターミナルで実行してください。
ブラウザで http://localhost:3000 を開き、アプリを操作します。トピックを検索し、カテゴリで絞り込み、コード例を表示し、項目をブックマークしてください。すべての操作は ClickStack Browser SDK によって自動的に記録されます。
5

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

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 に表示されるようになります。

​
トラブルシューティング

​
HyperDX にセッションが表示されない

  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)

​
401 Unauthorized エラー

API キーが正しく設定されていません。次の点を確認してください。
  1. ターミナルで export CLICKSTACK_API_KEY='your-key' を実行してエクスポートした
  2. エクスポートした同じターミナルでデモアプリを起動した
  3. キーを HyperDX UI から取得した (ランダムに生成した文字列ではない)

​
クリーンアップ

サービスを停止します: 
docker-compose down
すべてのデータを削除： 
docker-compose down -v

​
さらに詳しく

最終更新日 2026年6月10日