Easy Way to Beautify Your Ugly React Native Stack Trace

A. Izzuddiin A. — Mon, 05 Oct 2020 01:57:16 +0000

Cover Photo by Martijn Baudoin on Unsplash

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) stack trace.

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.

Stack Trace Beautifier

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 ExceptionsManagerModule.java .... These are crashes that occurred on javascript/react native side.
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.
Run stack-beautifier [path to. your source map] -t [path to your stack trace files]
Voila, you have beautified ugly stack-trace.

Obstacles

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

You can reach me on Email and Twitter. Let's talk :D

DEV Community: A. Izzuddiin A.

Easy Way to Beautify Your Ugly React Native Stack Trace

Stack Trace Beautifier

Obstacles