Have you ever had trouble reading your react native app's stack trace on the Firebase Crashlytics Console? So do I. It was very difficult (close to impossible) to understand the crash stack trace generated from the obfuscated code.
The problem above does not happen if the crash occurred on the native side (Android or IOS). Crashlytics can automatically get a mapping file on Android, and debug symbol (dSYM) file on iOS and upload it to Crashlytics Server. Those two files are the key so Crashlytics can de-obfuscate an ugly stack trace.
But, don't worry. stack-beautifier come to the rescue. stack-beautifier is a tool that can help you to de-obfuscate an ugly stack trace. We don't have to integrate anything into your app. We just need to install this library to our machine and provide a source map file and stack trace file. Then, let stack beautifier do the rest.
Here the steps:
- Install this library to your machine. Run
npm install -g stack-beautifier
- Open Firebase Crashlytics Console and find crashes titled
- Create an empty text file and copy-paste stack trace from Firebase Crashlytics Console into it. Look at Pic 1 to determine where is the stack trace do you need.
stack-beautifier [path to. your source map] -t [path to your stack trace files]
- Voila, you have beautified ugly stack-trace.
You will find some obstacles when you followed those steps.
You Don't Have Source Map / Source Map is Missing
You just need to re-generated it. Add this variable to your
project.ext.react = [
Then, rebuild your app using release mode.
You need to rebuild it on a codebase that exactly as same as the app that you have uploaded to Playstore.
Stack trace parse error at line xx
This happened because your stack trace contains an unrecognized format by stack-beautifier. You need to change your stack trace as same as the documentation said: Stack trace input format