react native で source map の解析

react native でアプリを作成し、クラッシュレポートは App Center Crashes (React Native) を使うこととなった。
ほんとは、Sentryが良かったのだが無料枠があるものの上限を超えると有料になるのとどうも利用規約がややこしい。
App Center Crashes の Android はソースマップに対応してないので、解析のTipsを紹介します。

  • androidはリリースビルドすると以下へソースマップされている
# prod/release の の部分は build.gradle の設定で異なる

android/app/build/generated/sourcemaps/react/prod/release/index.android.bundle.map

このソースマップを使ってクラッシュの調査をする。

クラッシュ例

Error: Crash Test error!
address at index.android.bundle:1:1408764

調査用のscript


// ソースマップからソースの確認 const sourceMap = require('source-map'); const fs = require('fs'); // 行数、カラム数 const line = 1; const column = 1408765; // ソースマップファイルを読み込む const sourcemap = JSON.parse(fs.readFileSync(`index.android.bundle.map`, 'utf8')); const smc = new sourceMap.SourceMapConsumer(sourcemap); console.log(smc.originalPositionFor({ line, column }));

実行結果

{
  source: '/Users/hoge/workspace/project-name/src/view/TestScreen.tsx',
  line: 37,
  column: 13,
  name: 'Error'
}

その他

  • 手動でjsのバンドルされたjsファイル作成、ソースマップ作成コマンド
# android
react-native bundle --entry-file index.js --platform android --dev false --reset-cache --bundle-output index.android.bundle --sourcemap-output index.android.bundle.map
# ios
react-native bundle --entry-file index.js --platform ios --dev false --reset-cache --bundle-output index.ios.bundle --sourcemap-output index.ios.bundle.map