Chrome拡張機能

1. Chrome を開き、chrome://extensions にアクセスします。
2. デベロッパー モード を有効にします (右上) 。
3. パッケージ化されていない拡張機能を読み込む をクリックします。
4. クローンした hyperdx-chrome-extension ディレクトリを選択します。

拡張機能はツールバーに HyperDX Browser Extension として表示されます。

すでに ClickStack または HyperDX のインジェスト エンドポイントがある場合は、拡張機能を設定する に進んでください。

ローカルの ClickStack 環境では、OpenTelemetry Collector を起動します。{{CLICKHOUSE_ENDPOINT}} と {{CLICKHOUSE_PASSWORD}} は ClickHouse の接続情報に置き換えてください。

export CLICKHOUSE_ENDPOINT={{CLICKHOUSE_ENDPOINT}}
export CLICKHOUSE_PASSWORD={{CLICKHOUSE_PASSWORD}}

docker run \
  -e CLICKHOUSE_ENDPOINT=${CLICKHOUSE_ENDPOINT} \
  -e CLICKHOUSE_USER=default \
  -e CLICKHOUSE_PASSWORD=${CLICKHOUSE_PASSWORD} \
  -p 8080:8080 \
  -p 4317:4317 \
  -p 4318:4318 \
  clickhouse/clickstack-otel-collector:latest

UI が起動していることを確認するには、http://localhost:8080 で HyperDX を開きます。

ClickHouse と HyperDX UI を含む完全なローカルデプロイについては、ClickStack を使い始める を参照してください。

ローカルの ClickStack では、API key が不要な場合があります。http://localhost:4318 上のセルフホスト collector にテレメトリーを送信する場合は、拡張機能のこのフィールドを空のままにしてください。

ClickStack Cloud または HyperDX Cloud へインジェストする場合は、HyperDX を開いて Team Settings → API Keys に移動し、インジェスト API key をコピーします。

Chrome のツールバーにある HyperDX Browser Extension アイコンをクリックし、各設定を入力します。

Save Configuration をクリックし、インストルメントしたいタブを再読み込みします。

上のスクリーンショットは、典型的なローカル設定を示しています。監視が有効で、サービス名が設定され、collector は http://localhost:4318 を指し、トレース伝播は API と localhost の URL に限定されています。

Chrome で任意の Web サイトまたはローカルアプリケーションを開きます。たとえば、フロントエンドの開発サーバーなら http://localhost:3000 です。

通常どおりにページを操作します。リンクをクリックし、フォームを送信し、エラーをトリガーし、ビュー間を移動します。設定が正しければ、拡張機能はページの読み込みごとに Browser SDK を自動的にインジェクトします。

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

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

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