Sentry source maps with hermes in react-native

After turn on Hermes engine in our app i was fighting with ugly source maps in sentry events. Every issue looked same… :/

Sentry code view with enabled hermes without custom source maps

Look at official documentation doesn't help much https://docs.sentry.io/platforms/react-native/manual-setup/hermes/ . I was informed that need upload custom source maps. After some trying and failing, failing and failing created shell script which extract souce maps from react native app, extract from hermes engine, combine them and upload to the sentry.

#!/bin/bash
export SENTRY_ORG=<ORG>
export SENTRY_PROJECT=<PROJECT>
export SENTRY_TOKEN=<TOKEN>

RELEASE_NAME_PREFIX=$(cat ../android/app/build.gradle | grep -o "applicationId \".*" | cut -d " " -f 2 | sed -e "s/\"//g")
RELEASE_NAME=$(cat ../android/app/build.gradle | grep -o "versionName \".*" | cut -d " " -f 2 | sed -e "s/\"//g")
DISTRIBUTION_NAME=$(cat ../android/app/build.gradle | grep -o "versionCode .*" | cut -d " " -f 2)


node_modules/.bin/react-native bundle \
    --dev false \
    --platform android \
    --entry-file index.js \
    --bundle-output index.android.bundle \
    --sourcemap-output index.android.bundle-plain.map

node_modules/hermes-engine/linux64-bin/hermesc -O -emit-binary -out android-release.bundle.hbc index.android.bundle -output-source-map

node node_modules/react-native/scripts/compose-source-maps.js index.android.bundle-plain.map android-release.bundle.hbc.map -o index.android.bundle.map

node_modules/@sentry/cli/bin/sentry-cli --auth-token ${SENTRY_TOKEN} \
    releases \
    files "${RELEASE_NAME_PREFIX}@${RELEASE_NAME}+${DISTRIBUTION_NAME}" \
    upload-sourcemaps \
    ./index.android.bundle.map ./index.android.bundle \
    --dist ${DISTRIBUTION_NAME} \
    --rewrite

And our code views in sentry issues are pretty again… :)

Sentry code view after hermes source maps uploaded

sources:

https://docs.sentry.io/platforms/react-native/manual-setup/hermes/