こんにちは。現場で戦うエンジニアの皆さん。
プロダクトが成長し、ユーザーが増えるほど、開発者を悩ませるのが「再現性のないクラッシュ」です。「ユーザーの端末で落ちたが、手元では動く」。この悪夢に立ち向かうための最強の武器が、今回紹介するRollbarです。
React NativeはJS層とネイティブ層（iOS/Android）の境界があるため、ログの可視化には少しコツがいります。今日は、単なる導入ではなく「現場で即戦力になるための最適解」を伝授しましょう。
—
1. なぜ「Rollbar」なのか？―エラートラッキングの本質
Rollbarの本質は、エラーを「ただのテキスト」として収集するのではなく、「文脈（Context）」を付与して「再生産可能」にすることにあります。
特にReact Nativeでは、JSのバグなのか、ネイティブモジュールの不具合なのかを瞬時に判別する必要があります。Rollbarは、その迷宮からあなたを救い出す地図になります。
2. インストールと基盤セットアップ
まずは、React NativeプロジェクトにRollbarを迎え入れます。
必要なライブラリをインストール
npm install rollbar react-native-rollbar
次に、エントリーポイント（`index.js` または `App.js`）で初期化します。ここでのポイントは、グローバルにエラーを捕捉する設定を入れることです。
import { Client } from ‘rollbar-react-native’;
const rollbar = new Client({
accessToken: ‘YOUR_ACCESS_TOKEN’, // Rollbarダッシュボードで取得
environment: ‘production’,
// ユーザー情報を紐付けるためのフック
payload: {
platform: ‘react-native’,
},
});
// グローバルエラーハンドラ（JS層のクラッシュを漏らさない）
const originalErrorHandler = ErrorUtils.getGlobalHandler();
ErrorUtils.setGlobalHandler((error, isFatal) => {
rollbar.error(error);
originalErrorHandler(error, isFatal);
});
3. 【最重要】ソースマップで「難読化の壁」を突破する
リリースビルドでは、コードは難読化（Minify）されます。Rollbarに届くエラーログが `at a.js:1:500` のように表示されても、絶望するだけですよね。
「ソースマップ（Source Map）」をアップロードして、エラーの発生箇所を元のソースコードの行数に復元する。これがプロの必須スキルです。
Fastlaneを使った自動化のすすめ
リリース作業に手動アップロードは厳禁です。`Fastlane`を使っているなら、デプロイフローにRollbarのアップロードを組み込みます。
Fastfileの例
lane :upload_sourcemap do
# JSバンドルとソースマップを生成
sh(“npx react-native bundle –platform android –dev false –entry-file index.js –bundle-output index.android.bundle –sourcemap-output index.android.map”)
# Rollbarへアップロード
sh(“curl https://api.rollbar.com/api/1/sourcemap/upload \
-F access_token=YOUR_ACCESS_TOKEN \
-F version=1.0.0 \
-F minified_url=http://reactnativehost/index.android.bundle \
-F source_map=@index.android.map”)
end
※ `minified_url` は、React Nativeの場合はダミーURLで構いませんが、Rollbar側での一致条件として重要です。
4. ユーザーセッションを紐解く「神テクニック」
エラーが起きたとき、「どの画面で、誰が、何をしたか」が分からないと修正の優先度が決められません。以下のコードを共通のAPIクライアントやNavigationのフックに仕込んでおきましょう。
// ユーザー情報をセット（ログイン後やApp起動時に呼ぶ）
rollbar.setPerson({
id: user.id,
username: user.name,
email: user.email,
});
// 何をしたか（ログの履歴を残す）
rollbar.info(‘User navigated to CheckoutScreen’);
これを仕込むだけで、「チェックアウト画面で特定のユーザーだけが落ちている」といった「事象の因果関係」が手に取るように分かります。
5. HelloWorld的動作確認
設定が正しいかを確認するため、意図的にエラーを投げます。
// ボタンクリックイベントなどで実行
const testCrash = () => {
rollbar.info(‘Test log: Checking connectivity’);
throw new Error(‘これはRollbarのテストクラッシュです’);
};
アプリを実行し、ボタンを押してアプリを落としてください。Rollbarのダッシュボードに「ソースコードのどの行で落ちたか」が綺麗に表示されていれば、あなたのデバッグ環境は劇的に進化しています。
—
先輩からのアドバイス
オブザーバビリティとは、単に「エラーを見る」ことではありません。「未知のバグを、既知の課題に変える」ことです。
まずはソースマップの自動アップロードを完璧にしてください。それだけで、あなたは他のエンジニアが頭を抱えている間に、涼しい顔で修正コードをコミットできるようになります。
さあ、今日から「ログを追う作業」を卒業して、「価値あるコードを書く時間」を増やしていきましょう。何か詰まったら、いつでも戻ってきてくださいね。応援しています！