Rollbar Custom Telemetry：エラーの「犯行現場」を完全再現する技術
いいか、よく聞け。「エラーが再現しません」という報告ほど、エンジニアの寿命を削るものはない。
ログに吐き出されたスタックトレースを眺め、必死にローカルで環境を再現しようと試み、結局「再現手順不明」のチケットを積む……そんな不毛な時間は今日で終わりだ。
Rollbarの`Telemetry`は、単なる「エラー発生時のログ記録」ではない。ユーザーがエラーという名の断崖絶壁に突き落とされるまでの「数秒間の軌跡」を記録する、ブラックボックス・レコーダーだ。 これを使いこなせば、デバッグ時間は数時間から数分に圧縮できる。
今日は、Rollbarをただの「エラー通知ツール」から「最強のデバッグ兵器」に昇華させるための実践テクニックを叩き込む。
—
1. なぜ「Custom Telemetry」が必須なのか
標準的なエラー監視は「結果」しか教えてくれない。しかし、エラーは常に「文脈（Context）」の中に存在する。
- どのボタンを押したのか？
- どのAPIを叩いた結果、不正なレスポンスが返ってきたのか？
- その直前に、クライアントサイドでどんな状態遷移（State Change）が起きたのか？
これらをRollbarのTelemetryに流し込むことで、「ユーザーの操作ログ」を時系列で追跡できる。 これこそが、再現性の呪縛を解く鍵だ。
—
2. 実践：Custom Telemetryの実装術
単にブラウザのイベントを垂れ流すだけではノイズの海に溺れる。重要なのは「意味のある行動」を記録することだ。
JavaScript実装のベストプラクティス
`Rollbar.configure`で初期設定を済ませたら、重要箇所で `Rollbar.telemetry()` を叩け。
// 現場で使うべきラッパー関数
const logAction = (type, data) => {
// ユーザーの行動をTelemetryとして送信
// type: ‘click’, ‘api’, ‘navigation’ などで分類する
Rollbar.telemetry(type, {
timestamp: Date.now(),
details: data,
// 重要なのは「何が起きたか」という文脈
context: window.location.pathname
});
};
// APIリクエストの前後をフックして記録する例
async function fetchUserData(userId) {
logAction(‘api_request’, { url: ‘/api/user’, userId });
try {
const response = await fetch(`/api/user/${userId}`);
return await response.json();
} catch (err) {
logAction(‘api_error’, { error: err.message });
throw err; // Rollbarが自動的にエラーを捕捉
}
}
—
3. 生産性を加速させる「神・運用テクニック」
① チーム開発での「設定共有化」ルール
設定が属人化するとツールは死ぬ。`rollbar.config.js` をリポジトリのルートに置き、環境変数で制御せよ。
`rollbar.config.js` の構成例:
module.exports = {
accessToken: process.env.ROLLBAR_ACCESS_TOKEN,
captureUncaught: true,
captureUnhandledRejections: true,
payload: {
environment: process.env.NODE_ENV,
client: {
javascript: {
source_map_enabled: true, // ソースマップは必須！
code_version: process.env.GIT_COMMIT_HASH // デプロイハッシュで追跡
}
}
},
// ノイズ除去の神設定：不要なエラーを握りつぶす
checkIgnore: (isUncaught, args, payload) => {
const msg = payload.message || “”;
// 特定のサードパーティ広告スクリプトのエラーを無視
return msg.includes(‘ad-tracker-script’);
}
};
② 開発スピードを劇的に高める「ショートカット」
Rollbarのダッシュボードを使いこなせ。
- `Shift + /`: ダッシュボード内でキーボードショートカット一覧を即座に開く。
- `Enter` (Issue詳細画面): 選択中のエラーを即座に「Resolved（解決済み）」にする。
- `a`: 担当者を自分にアサインする。
これらを使い、マウスに触れる回数を極限まで減らせ。
—
4. テックリードからの警告：やってはいけないこと
1. 個人情報の混入: Telemetryにメールアドレスやトークンをそのまま流すな。必ずマスク処理を挟め。
2. Telemetryの過剰摂取: 全てのクリックイベントを記録すると、ノイズで何が重要か分からなくなる。「エラーに繋がる可能性のある操作」のみを厳選せよ。
3. Source Mapの放置: JSのミニファイ化されたコードを眺めるのは苦行だ。ビルドパイプラインに `rollbar-cli` を組み込み、デプロイ時に必ずソースマップをアップロードしろ。
—
最後に：なぜ我々はこれをするのか
オブザーバビリティとは、単なる「監視」ではない。「プロダクトの鼓動を可視化し、ユーザーが体験している苦痛を先回りして取り除くこと」だ。
Rollbarでエラーの前後を追い、ユーザーがどこで躓いたかを突き止める。その積み重ねが、バグのない美しいコードベースを育て、エンジニアとしての君の価値を証明する。
さあ、今すぐコードを開き、重要なAPIコールに `Rollbar.telemetry` を仕込め。今日からデバッグの作法を変えるんだ。