Skip to main content

调试发布版本

符号化堆栈跟踪​

¥Symbolicating a stack trace

如果 React Native 应用在发布版本中抛出未处理的异常，则输出可能会变得模糊且难以阅读。

¥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

在上面的堆栈跟踪中，像 p@1:132161 这样的条目是缩小的函数名称和字节码偏移量。为了调试这些调用，我们希望将它们转换为文件、行和函数名称，例如 AwesomeProject/App.js:54:initializeMap。这称为符号化。

¥In the above stack trace, entries like p@1:132161 are minified function names and bytecode offsets. To debug these calls, we want to translate these into file, line, and function name, e.g. AwesomeProject/App.js:54:initializeMap. This is known as symbolication.

你可以通过将堆栈跟踪和生成的源映射传递给 metro-symbolicate 来符号化如上所述的缩小函数名称和字节码。

¥You can symbolicate minified function names and bytecode like the above by passing the stack trace and a generated source map to metro-symbolicate.

启用源映射​

¥Enabling source maps

需要源映射来符号化堆栈跟踪。确保在目标平台的构建配置中启用源映射。

¥Source maps are required to symbolicate stack traces. Make sure that source maps are enabled within the build config for the target platform.

信息

在 Android 上，默认情况下启用源映射。

¥On Android, source maps are enabled by default.

要启用源映射生成，请确保 android/app/build.gradle 中存在以下 hermesFlags。

¥To enable source map generation, ensure the following hermesFlags are present in android/app/build.gradle.

react {
    hermesFlags = ["-O", "-output-source-map"]
}

如果操作正确，你应该在 Metro 构建输出期间看到源映射的输出位置。

¥If done correctly you should see the output location of the source map during Metro build output.

Writing bundle output to:, android/app/build/generated/assets/react/release/index.android.bundle
Writing sourcemap output to:, android/app/build/intermediates/sourcemaps/react/release/index.android.bundle.packager.map

使用 metro-symbolicate​

¥Using metro-symbolicate

生成源映射后，我们现在可以转换堆栈跟踪。

¥With source maps being generated, we can now translate our stack traces.

# Print usage instructions
npx metro-symbolicate

# From a file containing the stack trace
npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map < stacktrace.txt

# From adb logcat (Android)
adb logcat -d | npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map

源映射注意事项​

¥Notes on source maps

  • 构建过程可能会生成多个源映射。确保使用示例中所示位置中的位置。

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

  • 如果 metro-symbolicate 立即成功退出，请确保输入来自管道或重定向，而不是来自终端。

    ¥If metro-symbolicate exits immediately with success, make sure the input comes from a pipe or redirection and not from a terminal.