Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Will Holen's doc on symbolication #2112

Merged
merged 1 commit into from
Jul 29, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions docs/symbolication.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
id: symbolication
title: 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:

```sh
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](environment-setup).
From a file containing the stacktrace:

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

From `adb logcat`directly:

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

## Notes on Sourcemaps

- Multiple source maps may be generated by the build process. Make sure to used 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.
3 changes: 3 additions & 0 deletions website/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,9 @@
"switch": {
"title": "Switch"
},
"symbolication": {
"title": "Symbolicating a stack trace"
},
"systrace": {
"title": "Systrace"
},
Expand Down
1 change: 1 addition & 0 deletions website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"running-on-device",
"fast-refresh",
"debugging",
"symbolication",
"testing-overview",
"libraries",
"typescript",
Expand Down