- Galih Laras Prakoso
The story begin when my Networth app was released to production. I'm fully relying on Crashlytics on tracking any errors that happen in production. I was very confident that time because I believe that any errors that would be happening in production would be recorded in Crashlytics.
What the heck is that?
As you can see there, the stack traces would start on the main error, in my case
and it will continue to describe the exact location of the error: `There error is located at: in h -> in RCTView -> in Unknown -> in Unknown -> and so on.
Those are minified component and function names and bytecode offsets that we will never understand. This is known as symbolication.
How to understand that symbolicated information?
After some googling, finally, I found a very useful tool that will help us to understand that error. Maybe some of you have been looking for this tool or method to solve this problem and can't find any. But now, here it is.
The tool is a package called
metro-symbolicate. This package is installed by default in the React Native template project.
With this tool, we can symbolicate minified function names and bytecode by passing generated source map and the stack trace to metro-symbolicate via terminal.
I will just use the real crash record from my Networth app's error stack traces that happened on the android platform.
Okay, so first, let's put the stack traces on a file inside our React Native project called
And then we just need to run the
metro-symbolicate package via
npx like this:
npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map < stack-traces.txt
This command will symbolicate the error and it will look like this:
...in RCTViewin C, js engine: hermes, stack:/.../InputRecurrence.js:105:InputRecurrence/.../node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6871:flushPassiveEffectsImpl...
Every single line will be understandable now. In my case, the error happened in
InputRecurrence.js:105 file. 👏🏻
There is a posibility that multiple source maps will be generated during the build process, make sure you used the one in the location described above
android/app/build/generated/sourcemaps/react/release/. And also make sure that that source map you used is the latest one before you push the changes on the production build.