[go: up one dir, main page]
Scribd
Upload
140 views2 pages

React Native Stack Trace Debugging

This document discusses how to symbolicate a React Native stack trace to translate minified function names and bytecode offsets into readable file, line, and function names. It recommends using the metro-symbolicate package to symbolicate a stack trace from a file or adb logcat output by passing in the generated sourcemap. It notes that multiple sourcemaps may be generated, so the correct one corresponding to the crashing app commit should be used.

Uploaded by

Mrinmoy Shee
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
140 views2 pages

React Native Stack Trace Debugging

This document discusses how to symbolicate a React Native stack trace to translate minified function names and bytecode offsets into readable file, line, and function names. It recommends using the metro-symbolicate package to symbolicate a stack trace from a file or adb logcat output by passing in the generated sourcemap. It notes that multiple sourcemaps may be generated, so the correct one corresponding to the crashing app commit should be used.

Uploaded by

Mrinmoy Shee
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

4/19/23, 7:45 AM Symbolicating a stack trace · React Native

Symbolicating a stack trace


If a React Native app throws an unhandled exception in a release build, the output may
be obfuscated and hard to read:

07-15 10:58:25.820 18979 18998 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules


07-15 10:58:25.820 18979 18998 E AndroidRuntime: Process: com.awesomeproject, PID:
18979 07-15 10:58:25.820 18979 18998 E AndroidRuntime:
com.facebook.react.common.JavascriptException: Failed, js engine: hermes, stack:
07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132161
07-15 10:58:25.820 18979 18998 E AndroidRuntime: p@1:132084
07-15 10:58:25.820 18979 18998 E AndroidRuntime: f@1:131854
07-15 10:58:25.820 18979 18998 E AndroidRuntime: anonymous@1:131119

The sections like p@1:132161 are minified function names and bytecode offsets. To
debug the problem, you would instead want to translate it into file, line and function
name: AwesomeProject/App.js:54:initializeMap . This is known as symbolication. You
can symbolicate minified function names and bytecode like the above by passing
metro-symbolicate a generated source map and the stack trace.

The metro-symbolicate package is installed by default in the React Native template


project from setting up your development environment.

From a file containing the stacktrace:

npx metro-symbolicate
android/app/build/generated/sourcemaps/react/release/index.android.bundle.map <
stacktrace.txt

From adb logcat directly:

adb logcat -d | npx metro-symbolicate


android/app/build/generated/sourcemaps/react/release/index.android.bundle.map

This will turn each minified function name and offset like p@1:132161 into the actual
file- and function name AwesomeProject/App.js:54:initializeMap .

https://reactnative.dev/docs/symbolication 1/2
4/19/23, 7:45 AM Symbolicating a stack trace · React Native

Notes on Sourcemaps
Multiple source maps may be generated by the build process. Make sure to use the
one in the location shown in the examples.
Make sure that the source map you use corresponds to the exact commit of the
crashing app. Small changes in source code can cause large differences in offsets.
If metro-symbolicate exits immediately with success, make sure the input comes
from a pipe or redirection and not from a terminal.

Is this page useful?

Edit this page

Last updated on Jan 12, 2023

https://reactnative.dev/docs/symbolication 2/2

You might also like