React Native × Rollbar：難読化を「可読化」する、オブザーバビリティの神髄
React Nativeの運用において、最もエンジニアを疲弊させるのは「リリース直後に舞い込む、意味不明な難読化済みスタックトレース」だ。
「これ、どのコードの何行目で起きたんだ？」
この問いに即答できない監視体制は、ただの「エラー収集ゴミ箱」に過ぎない。Rollbarを単なるログ収集ツールから、「開発スピードを加速させる戦略的資産」へと昇華させるための、プロの技術設定を伝授する。
—
1. 難読化との戦い：ソースマップ自動アップロードの最適解
React NativeのMetro Bundlerで生成されるソースマップは、CI/CDパイプラインの中で「即座に」Rollbarへ流し込むのが鉄則だ。手動アップロードなど論外である。
プロの実践：`package.json` で完結させるビルドフック
`rollbar-cli` を使用し、ビルド完了後に自動的にソースマップをアップロードするワークフローを構築する。
// package.json
{
“scripts”: {
“deploy:ios”: “react-native bundle –platform ios … && npm run upload-sourcemap:ios”,
“upload-sourcemap:ios”: “rollbar-cli sourcemaps upload ./ios/main.jsbundle ./ios/main.jsbundle.map –version $APP_VERSION –minified-url main.jsbundle”
}
}
ここがプロの勘所:
- `–minified-url` には、アプリ内でロードされるバンドルファイル名を正確に指定すること。ここがズレるとRollbar上で「Source map not found」の赤文字を拝むことになる。
- CI環境（GitHub Actions等）では、環境変数で `ROLLBAR_ACCESS_TOKEN` を注入し、セキュアに管理する。
—
2. ネイティブクラッシュの「解剖」：iOS/Android対応の神設定
React NativeはJS層だけでなく、ネイティブ（Objective-C/Java）層でのクラッシュも発生する。これを放置すると、JS側でハンドリングできない「サイレントキラー」になる。
`rollbar-react-native` の構成ベストプラクティス
`App.tsx` の初期化処理で、単なる初期化を超えたコンテキスト付与を行う。
import { Rollbar } from ‘rollbar-react-native’;
const rollbar = new Rollbar({
accessToken: ‘YOUR_ACCESS_TOKEN’,
environment: __DEV__ ? ‘development’ : ‘production’,
// 重要：JSとネイティブのスタックトレースをマージする設定
captureUncaught: true,
captureUnhandledRejections: true,
});
// 神テクニック：ユーザーセッション情報の紐付け
// 障害発生時に「どのユーザーの、どの操作で起きたか」を即座に特定する
const setUserContext = (user: User) => {
rollbar.setPerson({
id: user.id,
username: user.email,
email: user.email
});
};
—
3. チームの生産性を最大化する「Rollbar運用ルール」
ツールは使いこなしてこそ意味がある。チーム開発で混乱を招かないための「運用規約」を共有する。
① 「ノイズを殺す」フィルタリング設定
全ての警告を通知すると、Slackは墓場になる。`checkIgnore` を使い、開発上無視すべきエラーはクライアント側で弾く。
// rollbar初期化オプションに追加
checkIgnore: (isUncaught, args, payload) => {
const message = args[0];
// ユーザーのネットワーク切断などはエラーとして扱わない
if (message && message.includes(‘Network request failed’)) {
return true;
}
return false;
}
② チームで使うべき神プラグイン・拡張
- Rollbar VS Code Extension: ブラウザを開かずにVS Code上でスタックトレースを確認し、該当箇所へジャンプする。これが導入されていないチームは、コンテキストスイッチのコストをドブに捨てている。
- Slack Integration (Granular): 全てを通知せず、`Critical` レベルのみをSlackへ。`Info/Warning` はRollbarのダッシュボードで週次レビューする運用に留める。
—
4. テックリードからの極秘アドバイス：障害予兆の検知
優秀なアーキテクトは、クラッシュしてから動くのではない。「エラーレートの急上昇」を検知して先手を打つ。
1. 「Threshold Alerts」を全プロジェクトで有効化せよ:
特定の時間内にエラー数が閾値（例: 過去10分の平均の2倍）を超えたら、PagerDutyやSlackへ即時通知する設定を入れろ。
2. 「Grouping」をカスタマイズせよ:
デフォルトのグループ化では不十分な場合が多い。`fingerprint` を利用して、ビジネスロジック的に「同じ性質を持つエラー」を1つに集約する。これにより、何百件ものエラーログが1つの「既知のバグ」として可視化される。
—
最後に：オブザーバビリティは「文化」である
Rollbarの設定ファイル（`rollbar.config.js`）は、単なる設定値の羅列ではない。それは、君たちのチームが「ユーザーの体験をどれだけ真剣に守ろうとしているか」という技術的良心そのものだ。
難読化されたログを眺めて溜息をつく時間は、今日で終わりだ。設定を自動化し、コンテキストを付与し、ノイズを排除せよ。そうすれば、君たちのコードはより強固になり、チームのリリース速度は、かつてないほど軽やかになるはずだ。
さあ、今すぐビルドパイプラインを書き換えろ。現場からは以上だ。