フロントエンドの「闇」を可視化せよ：Rollbarで実現するモダンReactエラー戦略
こんにちは。本日は、ユーザーのブラウザという「ブラックボックス」で起きているエラーを、いかにして開発者の手元へ最短ルートで届けるか、その極意を伝授します。
多くのエンジニアがRollbarを「単なるエラーログ収集ツール」だと思っています。しかし、それは宝の持ち腐れです。Rollbarは、「ユーザーが何を見て、何をクリックし、どの瞬間に絶望したのか」を再現するタイムマシンです。
React/Next.jsの現場で、泥臭いデバッグからチームを解放するための「実戦的アーキテクチャ」を共有します。
—
1. 導入：ただ入れるな、設計せよ
まず、`@rollbar/react`をインストールする際、安易に`App.tsx`の直下で初期化してはいけません。フロントエンドの肥大化に伴い、エラーの重み付けは必須です。
インストールとプロバイダー設計
npm install rollbar @rollbar/react
単なるラッパーではなく、「コンテキストの注入」を意識した設計にします。
// lib/rollbar.ts
import Rollbar from ‘rollbar’;
export const rollbar = new Rollbar({
accessToken: process.env.NEXT_PUBLIC_ROLLBAR_ACCESS_TOKEN,
captureUncaught: true,
captureUnhandledRejections: true,
payload: {
environment: process.env.NODE_ENV,
client: {
javascript: {
source_map_enabled: true, // ソースマップは必須。これがないRollbarは目隠し運転と同じ。
guess_uncaught_frames: true,
}
}
}
});
2. ErrorBoundaryの「神」設定
Reactの`ErrorBoundary`は単にクラッシュを防ぐためのものではありません。「ユーザー体験を損なわないための安全装置」です。
import { ErrorBoundary, RollbarProvider } from ‘@rollbar/react’;
import { rollbar } from ‘../lib/rollbar’;
export const AppProvider = ({ children }) => (
{children}
);
【極限の知見】カスタムデータの注入
デフォルトのスタックトレースだけでは「なぜ」が分かりません。必ず`scope`を利用して、エラー時の状態をスナップショットしてください。
// エラーハンドリング時に情報を付与する
rollbar.configure({
payload: {
context: {
userId: user.id, // 誰が
url: window.location.href, // どこで
lastAction: getRecentUserAction(), // 何をした直後に
}
}
});
—
3. チームの生産性を底上げする「運用」の作法
優秀なテックリードは、ツールを個人利用させません。チーム全体が「エラーを見るのが楽しくなる」仕組みを作ります。
① 設定の共有化ルール：`rollbar.config.json`
環境変数に依存する設定以外は、リポジトリルートに設定ファイルを置き、CI/CDでバリデーションをかけます。
{
“client”: {
“enabled”: true,
“log_level”: “debug”,
“report_uncaught_exceptions”: true,
“ignore_messages”: [
“ResizeObserver loop limit exceeded”, // ノイズを徹底排除
“Script error.” // CDN等の外部スクリプトエラーは無視設定にする
]
}
}
② 隠れたキーボードショートカット（Web UI）
Rollbarのダッシュボードで以下のキーを叩いてください。
- `Shift + ?`: 全キーボードショートカットを表示。
- `j` / `k`: エラーリストの上下移動。
- `Enter`: 詳細画面へジャンプ。
- `a`: エラーのステータスを「解決済（Resolved）」に変更。
このショートカットを使いこなすだけで、毎朝のトリアージ速度が3倍になります。
③ 導入すべき神プラグイン
- GitHub Integration: エラーから直接Issueを作成し、修正コミットがマージされたら自動でRollbarのステータスを「解決済み」にする。これが「オブザーバビリティのループ」です。
—
4. 最後に：テックリードからの提言
Rollbarを導入する最大の目的は、「エラーを検知すること」ではありません。「ユーザーの不満を予測し、障害がビジネスに影響を与える前に葬り去ること」です。
- ノイズを捨てろ: 意味のないログは、本当の障害を見えなくします。`ignore_messages`の設定を週次で見直してください。
- ソースマップを正せ: Webpackのビルド設定とRollbarのアップロードスクリプトが同期していないプロジェクトは、例外なく崩壊します。CIで`upload-sourcemaps`を必ず実行してください。
エラーは、あなたのコードが発する「改善へのメッセージ」です。Rollbarを使い倒し、静寂なプロダクション環境を自らの手で作り上げてください。
何か具体的な実装で詰まっていることがあれば、いつでも相談してください。我々の仕事は、コードを書くことではなく、プロダクトを「止まらないもの」にすることなのですから。