Hermes

为使用 Hermes 引擎的 React Native 应用程序上传源映射。

Sentry 的 React Native SDK 开箱即用支持使用 Hermes 引擎的应用程序。要在产品中看到可读的堆栈跟踪,需要将源映射上传到 Sentry。本指南解释了如何手动从 Hermes 引擎上传源映射。

配置自动上传 source maps 最简单的方法是使用 Sentry Wizard:

Copied
npx @sentry/wizard@latest -i reactNative

要手动上传源映射,首先需要生成源映射和捆绑包。然后编译 Hermes 字节码捆绑包,最后将源映射上传到 Sentry。

首先,在你的 metro.config.js 中添加 Sentry React Native Metro 插件:

Copied
const { getDefaultConfig } = require("@react-native/metro-config");
const { withSentryConfig } = require("@sentry/react-native/metro");

const config = getDefaultConfig(__dirname);
module.exports = withSentryConfig(config);

生成 React Native Packager (Metro) 捆绑包和源映射:

Copied
npx react-native bundle \
  --dev false \
  --minify false \
  --platform android \
  --entry-file index.js \
  --reset-cache \
  --bundle-output index.android.bundle \
  --sourcemap-output index.android.bundle.map

编译 Hermes 字节码捆绑包和源映射:

Copied
node_modules/react-native/sdks/hermesc/osx-bin/hermesc \
  -O -emit-binary \
  -output-source-map \
  -out=index.android.bundle.hbc \
  index.android.bundle
rm -f index.android.bundle
mv index.android.bundle.hbc index.android.bundle

组成 Hermes 字节码和(React Native Packager)Metro 源映射:

Copied
mv index.android.bundle.map index.android.bundle.packager.map
node \
  node_modules/react-native/scripts/compose-source-maps.js \
  index.android.bundle.packager.map \
  index.android.bundle.hbc.map \
  -o index.android.bundle.map
node \
  node_modules/@sentry/react-native/scripts/copy-debugid.js \
  index.android.bundle.packager.map index.android.bundle.map
rm -f index.android.bundle.packager.map

确保 sentry-cli 已为你的项目配置,并设置环境变量:

.env
Copied
SENTRY_ORG=example-org
SENTRY_PROJECT=example-project
SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE

将捆绑包和源映射上传到 Sentry:

Copied
node_modules/@sentry/cli/bin/sentry-cli sourcemaps upload \
  --debug-id-reference \
  --strip-prefix /path/to/project/root \
  index.android.bundle index.android.bundle.map

上传后,bundle 文件的大小将为 0 字节。这是 Hermes 字节码的预期行为,不会影响源映射的解析。

更多 Hermes 指南,请参阅 Hermes 故障排除 文档部分。