[Sentry] Android sourcemaps are showing wrong stack trace when enabling hermes , using circle ci

[komalmishra]

OS:

• MacOS

Platform:

• Android

SDK:

"@sentry/react-native": "5.20.0",

react-native version: 0.68

Are you using Expo?
No , I am using react native cli

Are you using sentry.io or on-premise?

• sentry.io (SaaS)

If you are using sentry.io, please post a link to your issue so we can take a look:

[Link to issue]

Configuration:

(@sentry/react-native)

  Sentry.init({
    dsn: key,
    // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
    tracesSampleRate: 1.0,
    environment: environment,
    enableAutoSessionTracking: true,
    attachScreenshot: sentryFlagValues?.attachScreenshot || false,
    enableCaptureFailedRequests:
      sentryFlagValues?.enableCaptureFailedRequests || false,
    ignoreErrors: [serverErrorsRegex],
    integrations: [
      new Sentry.ReactNativeTracing({
        routingInstrumentation,
      }),
    release: `xyz@${version}+${buildNumber}`,
    dist: `${buildNumber}`,
  });

**I have the following issue:**
my hermes is enabled, I am trying to upload sourcemap with hermes document , but it is showing sourcemaps as Error: Test error to check Sentry integration } and
  at <global>(/home/circleci/consumer-mobile-app/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro-runtime/src/polyfills/require.js

Please help !!

[krystofwoldrich]

Hi @komalmishra,
thank you for the message,

are you using this guide to upload the source maps -> https://docs.sentry.io/platforms/react-native/sourcemaps/uploading/hermes/

or uploading automatically using sentry.gradle in app/build.gradle?

When you open an issue in Sentry, do you see hermes_debug_info in react_native_context? Is it the value?

[komalmishra]

Hi @krystofwoldrich ,

Thanks for the response,

I am uploading sourcemaps via circleci/config.yml for android where hermes is enables, without hermes, sourcemaps are working fine,
I tried multiple solutions as follows :

1. I am building using fastlane : lane :androidQABuild do |options|
   gradle(task: "clean assembleRelease")
   upload_to_firebase("QA", options)

   then running - run:
   name: Bundle React Native JavaScript for Android
   command: |
   node node_modules/react-native/scripts/compose-source-maps.js /home/circleci/project name/android/app/build/intermediates/sourcemaps/react/release/index.android.bundle.packager.map /home/circleci/project name/android/app/build/intermediates/sourcemaps/react/release/index.android.bundle.compiler.map -o /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.map
   curl -sL https://sentry.io/get-cli/ | bash
   if [ << buildType >> = "prod" ] || [ << buildType >> = "vendorProd" ]; then
   export SENTRY_ENVIRONMENT="production"
   else
   export SENTRY_ENVIRONMENT="QA"
   fi
   export SENTRY_DIST=${CIRCLE_BUILD_NUM}
   export ANDROID_VERSION=$(jq -r '.androidVersion' package.json)
   export SENTRY_RELEASE="xyz@$ANDROID_VERSION+${SENTRY_DIST}"
   npx sentry-cli releases new -p $SENTRY_PROJECT $SENTRY_RELEASE
   npx sentry-cli releases set-commits $SENTRY_RELEASE --auto --ignore-missing
   npx sentry-cli releases -o $SENTRY_ORG -p $SENTRY_PROJECT files $RELEASE upload-sourcemaps /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle /home/circleci/projectname/android/app/build/generated/assets/react/release/index.android.bundle.map --dist $SENTRY_DIST --url-prefix 'app:///' --rewrite --strip-prefix '/home/circleci/project name/android/app/build/generated/assets/react/release/'
   npx sentry-cli releases finalize $SENTRY_RELEASE
   npx sentry-cli deploys new -e $SENTRY_ENVIRONMENT

2.   Build Using Fastlane :   lane :androidQABuild do |options|
   

   gradle(task: "clean assembleRelease")
   upload_to_firebase("QA", options)

• run:
  name: Bundle React Native JavaScript for Android
  command: |
  # Step 1: Ensure the directory exists
  mkdir -p /home/circleci/xyz/android/app/build/generated/assets/react/release/

        # Step 2: Bundle the React Native JavaScript
        npx react-native bundle --dev false --minify false --platform android --entry-file index.js --reset-cache --bundle-output /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle --sourcemap-output /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.map
  
        # Step 3: Verify the bundle exists before proceeding
        if [ ! -f "/home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle" ]; then
          echo "Error: index.android.bundle not found"
          exit 1
        fi
  
        # Step 4: Use the correct Hermes binary for Linux (linux64-bin)
        node_modules/hermes-engine/linux64-bin/hermesc -O -emit-binary -output-source-map -out=/home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.hbc /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle
  
        # Step 5: Replace the JS bundle with the Hermes bytecode
        rm -f /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle
        mv /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.hbc /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle
  
        # Step 6: Rename the source map file
        mv /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.map /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.packager.map
  
        # Step 7: Compose the source maps (combine JS and Hermes maps)
        node node_modules/react-native/scripts/compose-source-maps.js /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.packager.map /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.hbc.map -o /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.map
  
        # Step 8: Inject debug ID into the source map for Sentry
        node node_modules/@sentry/react-native/scripts/copy-debugid.js /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.packager.map /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.map
  
        # Step 9: Clean up intermediate source maps
        rm -f /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.packager.map
  
        curl -sL https://sentry.io/get-cli/ | bash
        if [ << buildType >> = "prod" ] || [ << buildType >> = "vendorProd" ]; then
          export SENTRY_ENVIRONMENT="production"
        else
          export SENTRY_ENVIRONMENT="QA"
        fi
        export SENTRY_DIST=${CIRCLE_BUILD_NUM}
        export ANDROID_VERSION=$(jq -r '.androidVersion' package.json)
        export SENTRY_RELEASE="com.instarem.mobileapp@$ANDROID_VERSION+${SENTRY_DIST}"
        npx sentry-cli releases new -p $SENTRY_PROJECT $SENTRY_RELEASE
        npx sentry-cli releases set-commits $SENTRY_RELEASE --auto --ignore-missing
        npx sentry-cli releases -o $SENTRY_ORG -p $SENTRY_PROJECT files $RELEASE upload-sourcemaps /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle /home/circleci/project name/android/app/build/generated/assets/react/release/index.android.bundle.map --dist $SENTRY_DIST --url-prefix 'app:///' --rewrite --strip-prefix '/home/circleci/project name/android/app/build/generated/assets/react/release/'
        npx sentry-cli releases finalize $SENTRY_RELEASE
        npx sentry-cli deploys new -e $SENTRY_ENVIRONMENT
  

Sourcemaps output is. : Error:
at (/home/circleci/project name/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro-runtime/src/polyfills/require.js:11:1)

Where am I wrong, can you please guide ?

Do I need to upgrade sentry version, currently is am using ?

"@sentry/react-native": "5.20.0",

react-native version: 0.68

[komalmishra]

Hi @krystofwoldrich ,

I am also trying to upload sourcemaps manually for IOS, hermes is not enabled.

I am running following commands :

1. npx sentry-cli releases new $RELEASE_IOS --org $SENTRY_ORG --project $SENTRY_PROJECT --log-level=debug
2. npx sentry-cli releases info $RELEASE_IOS --org $SENTRY_ORG --project $SENTRY_PROJECT --log-level=debug
3. npx react-native bundle
   --dev true
   --minify true
   --platform ios
   --entry-file index.js
   --reset-cache
   --bundle-output ios/index.bundle
   --sourcemap-output ios/index.bundle.map
4. node_modules/@sentry/cli/bin/sentry-cli releases files $RELEASE_IOS upload-sourcemaps ios/index.bundle ios/index.bundle.map --dist $DIST_IOS --url-prefix 'app:///' --rewrite --strip-prefix root-path
5. npx sentry-cli releases finalize $RELEASE_IOS --org $SENTRY_ORG --project $SENTRY_PROJECT --log-level=debug
6. npx sentry-cli releases deploys new --org $SENTRY_ORG --project $SENTRY_PROJECT --release $RELEASE_IOS -e $ENVIRONMENT --log-level=debug
7. npx sentry-cli releases files $RELEASE_IOS list --org $SENTRY_ORG --project $SENTRY_PROJECT --log-level=debug

What to do, can you please guide ?

"@sentry/react-native": "5.20.0",

react-native version: 0.68

[krystofwoldrich]

Hi @komalmishra,
thank you for the details.

Android

Please add --debug-id-reference flag to update your source maps upload command. This is important for Hermes as the bundle is not plain text and with this flag the CLI will infer it from the source maps.

iOS

Although there is one error message, the stack trace from the message looks correctly symbolicated, or have I missed something?

Are you using self hosted Sentry?

[getsantry]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀