クラッシュレポートからバグの原因を特定する - ReactNative

FabricのCrashlyticsを使ってユーザーがクラッシュした時のログを収集できる

収集したログからバグってる箇所を特定する方法の一つとしてメモ

クラッシュレポートから探る

Fabricの管理画面を開いてクラッシュレポートを見ると、こんな報告があった

undefined is not an object (evaluating 'l.user.id')

Javascriptではよくあるエラー

JSコード部分にバグがあることがわかる

l.user.id に心当たりあるコードが１箇所の場合はすぐ特定出来るけど、何箇所もある場合どこのことを言ってるの分からない

renderRow にはメソッド名で心当たりがある

さらに 755:3840 755行目の3840文字目あたり

本番で使われてる js.bundle の中身のことを言っているので、自分で生成して見てみることにした

iOS

$ react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output /tmp/index.ios.bundle

Android

$ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output /tmp/index.android.bundle

とりあえず、iOSで生成した /tmp/index.ios.bundle を開いて確認してみる

l.user.id で検索すると、丁度 755行目に対象のコードを発見した

近辺のコードからどのjsファイルか特定できた

ログからだとどうしても特定できなかったときに便利