Skip to content

Commit

Permalink
Update debugging-release-builds.md
Browse files Browse the repository at this point in the history
  • Loading branch information
sunnylqm authored Dec 17, 2023
1 parent fa460b2 commit 8106504
Showing 1 changed file with 25 additions and 23 deletions.
48 changes: 25 additions & 23 deletions cndocs/debugging-release-builds.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ title: Debugging Release Builds

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

## 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.
在发布版本中,React Native 应用如果触发了未处理的异常,其输出可能会被混淆并且难以阅读。

```shell
07-15 10:58:25.820 18979 18998 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
Expand All @@ -18,30 +18,31 @@ If a React Native app throws an unhandled exception in a release build, the outp
07-15 10:58:25.820 18979 18998 E AndroidRuntime: anonymous@1:131119
```

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.**
在上述堆栈跟踪中,类似`p@1:132161`的条目是经过压缩的函数名称和字节码偏移量。为了调试这些调用,我们希望将它们转换为文件、行和函数名称,例如`AwesomeProject/App.js:54:initializeMap`。这被称为**符号化**

You can symbolicate minified function names and bytecode like the above by passing the stack trace and a generated source map to [`metro-symbolicate`](http://npmjs.com/package/metro-symbolicate).
您可以通过将堆栈跟踪和生成的源映射传递给[`metro-symbolicate`](http://npmjs.com/package/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.
### 启用源映射(source map)

源映射是符号化堆栈跟踪所必需的。请确保在目标平台的构建配置中启用了源映射。

<Tabs groupId="platform" queryString defaultValue={constants.defaultPlatform} values={constants.platforms} className="pill-tabs">
<TabItem value="android">

:::info
On Android, source maps are **enabled** by default.
Android 上,默认情况下已经启用了源映射。
:::

To enable source map generation, ensure the following `hermesFlags` are present in `android/app/build.gradle`.
要启用源映射生成,请确保在 `android/app/build.gradle` 中包含以下 `hermesFlags`

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

If done correctly you should see the output location of the source map during Metro build output.
如果操作正确,您应该在 Metro 构建输出期间看到源映射的输出位置。

```text
Writing bundle output to:, android/app/build/generated/assets/react/release/index.android.bundle
Expand All @@ -52,20 +53,20 @@ Writing sourcemap output to:, android/app/build/intermediates/sourcemaps/react/r
<TabItem value="ios">

:::info
On iOS, source maps are **disabled** by default. Use the following instructions to enable them.
在iOS上,默认情况下禁用源映射。请使用以下说明启用它们。
:::

To enable source map generation:
要启用源映射生成:

- Open Xcode and edit the build phase "Bundle React Native code and images".
- Above the other exports, add a `SOURCEMAP_FILE` entry with the desired output path.
- 打开 Xcode 并编辑“Bundle React Native code and images”构建阶段。
- 在其他导出项之上,添加具有所需输出路径的 `SOURCEMAP_FILE` 条目。

```diff
+ SOURCEMAP_FILE="$(pwd)/../main.jsbundle.map";
WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
```

If done correctly you should see the output location of the source map during Metro build output.
如果操作正确,您应该在 Metro 构建输出期间看到源映射的输出位置。

```text
Writing bundle output to:, Build/Intermediates.noindex/ArchiveIntermediates/application/BuildProductsPath/Release-iphoneos/main.jsbundle
Expand All @@ -75,23 +76,24 @@ Writing sourcemap output to:, Build/Intermediates.noindex/ArchiveIntermediates/a
</TabItem>
</Tabs>

### Using `metro-symbolicate`
### 使用 `metro-symbolicate`

With source maps being generated, we can now translate our stack traces.
有了生成的源映射,现在可以翻译我们的堆栈跟踪了。

```shell
# 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 logcatAndroid
adb logcat -d | npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map
```

### Notes on source maps
### 源映射注意事项

- 构建过程可能会生成多个源映射。确保使用示例中显示的位置的源映射。
- 确保您使用的源映射对应于崩溃应用的确切提交。源代码的小改动可能导致偏移的巨大差异。
- 如果 `metro-symbolicate` 立即成功退出,请确保输入来自管道或重定向,而不是终端。

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

0 comments on commit 8106504

Please sign in to comment.