How to get error source file from firebase crashlytics stack trace text index.android.bundle or iOS main.jsbundle?

Question

How to get the source file line and column information from a crashlytics stack trace line pointing to index.android.bundle:474:6500?

A crashlytics report stack trace text looks similar to:

Non-fatal Exception: io.invertase.firebase.crashlytics.UnhandledPromiseRejection: undefined is not an object (evaluating 't.includes')
       at .removeFile(index.android.bundle:474:6500)
       at .<unknown>(index.android.bundle:758:3472)
       at .y(index.android.bundle:105:596)
       at .<unknown>(index.android.bundle:105:2546)
       at .y(index.android.bundle:105:596)
       at .o(index.android.bundle:105:1483)
       at .<unknown>(index.android.bundle:105:1626)
       at .f(index.android.bundle:101:155)
       at .<unknown>(index.android.bundle:101:1012)
       at .y(index.android.bundle:107:657)
       at .C(index.android.bundle:107:1021)
       at .callImmediates(index.android.bundle:107:3216)
       at .callImmediates([native code]:0:0)
       at .value(index.android.bundle:25:3080)
       at .<unknown>(index.android.bundle:25:1264)
       at .value(index.android.bundle:25:2772)
       at .value(index.android.bundle:25:1234)
       at .value([native code]:0:0)
       at .value([native code]:0:0)

I tried stack-beautifier with limited success. Is there a more reliable method?

Answer 1

I spent days trying to figure out a good solution. This is the best I have found so far.

1) Build Source Maps from Git Tag or Commit Hash Corresponding to Version from Crashlytics Report

iOS

react-native bundle --platform ios --entry-file index.js --dev false --reset-cache --bundle-output /tmp/bundle.ios.js --assets-dest /tmp/ --sourcemap-output sourcemap.ios.js.map

Android builds automatically from build gradle

// https://github.com/facebook/react-native/issues/7393
// https://stackoverflow.com/questions/34715106/how-to-add-sourcemap-in-react-native-for-production/34733906
project.ext.react = [
    entryFile: "index.js",
    enableHermes: false,  // clean and rebuild if changing    
    extraPackagerArgs: ["--sourcemap-output", 
    file("$buildDir/../../../sourcemap.android.js.map")]
]

Or manually build:

react-native bundle --platform android --entry-file index.js --dev false --reset-cache --bundle-output /tmp/bundle.android.js --assets-dest /tmp/ --sourcemap-output sourcemap.android.js.map

2) Usage metro-symbolicate

1. Open crash report in your Google Firebase Console

2. Select Stack Trace tab

3. Select TXT tab and save text to file named mytrace.txt

4. Remove all stack trace lines starting with first line containing "[native code]" as the "[native code]" seems to cause problems

5. Results example: error originates at Utility.js:567

npx metro-symbolicate sourcemap.android.js < fs-27-stack-trace.txt                                                                 
Non-fatal Exception: io.invertase.firebase.crashlytics.UnhandledPromiseRejection: undefined is not an object (evaluating 't.includes')
       at .removeFile(/Users/eddie/Documents/projects/react-native/my-react-native-app/v1.6.1146/source/app/components/Utility.js:567:includes)
       at .<unknown>(/Users/eddie/Documents/projects/react-native/my-react-native-app/v1.6.1146/source/app/components/software-downloader/DownloadClient.js:237:oldVersion)

I hope this may help others.