Sentry、Bugsnag と Datadog RUM の連携ブリッジ

1. 課題：スタックトレースだけではユーザーの状況が分からない

サイトで未処理の JavaScript 例外やネットワーク障害が発生すると、Sentry などのエラー監視ツールは無機質なスタックトレースとブラウザーのユーザーエージェント文字列を示します。しかし、エンジニアには疑問が残ります： 「障害の直前、ユーザーはどのボタンをクリックしたのか？」 あるいは、 「フォームにどのようなデータが入力されていたのか？」

この問題を MousePlayer エラートラッキング連携ブリッジ が自動的に解決し、画面の再生 URL をエラーレポートに直接関連付けます。例外が発生すると、エンジニアは Sentry や Bugsnag のダッシュボードのリンクを一つクリックするだけで、障害が起きたまさにそのミリ秒までのユーザー画面の動画録画を視聴できます。

追加負荷のない連携： 連携ブリッジは、次の内部でバックグラウンド監視として静かに動作します： mp.js。エラートラッキング SDK を自動検出し、測定可能な追加負荷を生じさせず、Core Web Vitals にも影響しません。

2. 有効化 & プロバイダーの対応付け

エラートラッキング連携ブリッジは、ダッシュボードの画面、または SDK 設定オブジェクトを使うプログラムから有効にできます。

方法 A：ダッシュボードで有効化（コード不要）

MousePlayer のワークスペースにログインし、 プロパティを開きます。
対象サイトの横にある 設定／連携 ボタンをクリックします。
連携ウィンドウで、 Sentry、Bugsnag & Datadog RUM の連携ブリッジ を次に切り替えます： ON。
プロバイダー（sentry、 bugsnag、または datadog）を選択し、 変更を保存をクリックします。

方法 B：手動でスクリプトを設定

設定をコードに直接記述する場合は、 error_bridge_active: true を、次の window.mp_config オブジェクト内に渡します。

<script> window.mp_config = { channel: 'YOUR_CHANNEL_ID', error_bridge_active: true, error_provider: 'sentry' // 'sentry', 'bugsnag', or 'datadog' }; </script>

3. SDK の技術的な実行一覧

選択したプロバイダーに応じて、MousePlayer が公式 JavaScript SDK のタグ付けメソッドを自動的に実行します。

プロバイダー	実行する JavaScript メソッド	挿入するメタデータキー
Sentry	`window.Sentry.setTag(...)`	`mouseplayer_session_url`
Bugsnag	`window.Bugsnag.addMetadata('MousePlayer', { ... })`	`session_url`
Datadog RUM	`window.DD_RUM.setGlobalContextProperty(...)`	`mouseplayer_session_url`

4. エラーレポートで再生を見つける場所

有効にすると、フロントエンドの障害が記録されるたびに、エラー監視のダッシュボードに再生 URL が直ちに表示されます。

Sentry の課題詳細

Sentry のプロジェクトで任意の課題を開き、タグセクションまでスクロールします。次の名前のタグが表示されます： mouseplayer_session_url。また、クエリ検索バーで次を使い、Sentry の課題を絞り込めます： mouseplayer_session_url:*。

Bugsnag のメタデータタブ

Bugsnag のエラーレポートで、下部のナビゲーションタブを確認します。 MousePlayer という新しいカスタムタブが現れ、その中にクリック可能な session_url リンクが含まれます。

Datadog RUM のエラーエクスプローラー

Datadog RUM で任意の記録済みエラーセッションに移動し、 グローバルコンテキスト／属性 の JSON ツリーを確認します。URL は次の下に索引付けされています： @mouseplayer_session_url。

どのようなことでお困りですか？