Feeling bold?
Sentry's Docs BotAsk A Bot
Product
API
Changelog
Sandbox
Sign In

Hermes

Sentry's React Native SDK works out of the box with applications using Hermes engine. To see readable stack traces in the product source maps need to be uploaded to Sentry. This guide explains how to manually upload source maps from Hermes engine.

The easiest way to configure automatic source maps upload is to use the Sentry Wizard:

Copied
npx @sentry/wizard@latest -i reactNative

To manually upload source maps, first, you need to generate the source maps and bundle. Then compile the Hermes bytecode bundle, and finally upload the source map to Sentry.

Start with adding Sentry React Native Metro Plugin to your metro.config.js:

Copied
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const {
  createSentryMetroSerializer,
} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer");

const config = {
  serializer: {
    customSerializer: createSentryMetroSerializer(),
  },
};

const m = mergeConfig(getDefaultConfig(__dirname), config);
module.exports = m;

Generate the React Native Packager (Metro) bundle and source maps:

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

Compile Hermes bytecode bundle and source map:

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

Compose Hermes bytecode and (React Native Packager) Metro source maps:

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

Make sure sentry-cli is configured for your project and set up your environment variables:

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

Upload the bundle and source map to 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

For more Hermes guides, see the Hermes Throubleshooting docs section.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").
Suggest an edit to this page   |  Contribute to Docs   |  Report a problem
Package:
npm:@sentry/react-native
Version:
5.22.1
Repository:
https://github.com/getsentry/sentry-react-native