Easy Way to Beautify Your Ugly React Native Stack Trace
Tags: reactnative, javascript, stacktrace, android
Published: 2020-10-05 01:57:16

_Cover Photo by [Martijn Baudoin](https://unsplash.com/@martijnbaudoin?utm_source=devto&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=devto&utm_medium=referral)_

---
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.

This ugly stack trace comes from a crash that occurred on javascript/react native side. This happened because Crashlytics cannot automatically de-obfuscate JSC/V8's ([JS engines that used by react native](https://reactnative.dev/docs/javascript-environment)) stack trace.

![Pic 1: Stack trace displayed on Firebase Crashlytics Console](https://dev-to-uploads.s3.amazonaws.com/i/5cdesqxtnyn6epkswe7s.png)

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](https://firebase.google.com/docs/crashlytics/get-deobfuscated-reports). Those two files are the key so Crashlytics can de-obfuscate an ugly stack trace.

---
## Stack Trace Beautifier
But, don't worry. [stack-beautifier](https://github.com/software-mansion-labs/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:
1. Install this library to your machine. Run `npm install -g stack-beautifier`
2. Open Firebase Crashlytics Console and find crashes titled `ExceptionsManagerModule.java ...`. These are crashes that occurred on javascript/react native side.
3. 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.
4. Run `stack-beautifier [path to. your source map] -t [path to your stack trace files]`
5. Voila, you have beautified ugly stack-trace.
![Pic 2: De-obfuscated Stack Trace](https://dev-to-uploads.s3.amazonaws.com/i/72abg9194pj8qcdp9b0u.png)

## Obstacles
You will find some obstacles when you followed those steps.

1. **You Don't Have Source Map / Source Map is Missing**

     You just need to re-generated it. Add this variable to your `app/build.gradle` file:

     ```project.ext.react = [
          extraPackagerArgs: ['--sourcemap-output', 
          file("$buildDir/outputs/index.android.js.map")]
     ]```
     Then, rebuild your app using release mode. 

    > Important
    > You need to rebuild it on a codebase that exactly as same as the app that you have uploaded to Playstore.

2. **You Found `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](https://github.com/software-mansion-labs/stack-beautifier#stack-trace-input-format)

---
You can reach me on [Email](mailto:abdullahizzuddiin@gmail.com) and [Twitter](https://twitter.com/dinjudin). Let's talk :D