sentry-react-native: RN 0.69.10 Hermes Android uploaded sourcemap not being parsed correctly on sentry.io

OS:

  • Windows
  • MacOS
  • Linux

Platform:

  • iOS
  • Android

SDK:

  • @sentry/react-native (>= 1.0.0)
  • react-native-sentry (<= 0.43.2)

SDK version: 3.2.13

react-native version: 0.69.10

Are you using Expo?

  • Yes
  • No

Are you using sentry.io or on-premise?

  • sentry.io (SaaS)
  • on-premise

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: sentryDSN,
    release: eigenSentryReleaseName(),
    dist: DeviceInfo.getBuildNumber(),
    enableAutoSessionTracking: true,
    autoSessionTracking: true,
    enableOutOfMemoryTracking: false,
    ...props,
  })

I have following issue:

Hello,

we recently upgraded to 0.69.10 in https://github.com/artsy/eigen/

Our issue is that when we are uploading the source maps to Sentry they render like this: Screenshot 2023-05-11 at 17 41 22

The way we bundle and upload the app is that we use fastlane that uses the yarn bundle:android script which bundles the app and generates the jsbundle and bytecode and finally composing the sourcemaps.

We have this open PR where we enabled hermes on android and it is working really great other than that.

which makes me think that we are uploading it correcly but something is wrong on the sentry side of things

Steps to reproduce:

After composing the source maps we upload them to sentry, and I also confirmed that when downloading the sourcemap that was uploaded to sentry and the raw stacktrace from the issue and adding it to a stacktrace.txt file in my project and doing the following:

npx metro-symbolicate index.android.bundle.map < stacktrace.txt

it parses the error correctly and I get something like this:

Error: Sentry test error
  at onPress(/home/circleci/project/src/app/utils/DevMenu.tsx:235:DevMenuButtonItem.props.onPress)
  at onPressWrapped(/home/circleci/project/node_modules/@artsy/palette-mobile/dist/elements/Touchable/Touchable.js:29:onPressWrapped)
  at onPress(/home/circleci/project/node_modules/react-native/Libraries/Components/Touchable/TouchableHighlight.js:207:onPress)
  at _performTransitionSideEffects(/home/circleci/project/node_modules/react-native/Libraries/Pressability/Pressability.js:756:_performTransitionSideEffects)
  at _receiveSignal(/home/circleci/project/node_modules/react-native/Libraries/Pressability/Pressability.js:693:_receiveSignal)
  at onResponderRelease(/home/circleci/project/node_modules/react-native/Libraries/Pressability/Pressability.js:524:responderEventHandlers.onResponderRelease)
  at apply(native)
  at invokeGuardedCallbackImpl(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:22:invokeGuardedCallbackImpl)
  at apply(native)
  at invokeGuardedCallback(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:40:invokeGuardedCallback)
  at apply(native)
  at invokeGuardedCallbackAndCatchFirstError(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:53:invokeGuardedCallbackAndCatchFirstError)
  at executeDispatch(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:73:executeDispatch)
  at executeDispatchesAndReleaseTopLevel(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1125:executeDispatchesAndReleaseTopLevel)
  at forEach(native)
  at forEachAccumulated(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:361:forEachAccumulated)
  at anonymous(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1160:batchedUpdates$argument_0)
  at batchedUpdatesImpl(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:8094:batchedUpdatesImpl)
  at batchedUpdates(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1106:batchedUpdates)
  at _receiveRootNodeIDEvent(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1137:_receiveRootNodeIDEvent)
  at receiveTouches(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1209:ReactNativePrivateInterface.RCTEventEmitter.register$argument_0.receiveTouches)
  at apply(native)
  at __callFunction(/home/circleci/project/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:417:__callFunction)
  at anonymous(/home/circleci/project/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:114:__guard$argument_0)
  at __guard(/home/circleci/project/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:__guard)
  at callFunctionReturnFlushedQueue(/home/circleci/project/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:callFunctionReturnFlushedQueue)

Actual result:

Screenshot 2023-05-11 at 17 41 22

Expected result:

Something more readable like:

Error: Sentry test error
  at onPress(/home/circleci/project/src/app/utils/DevMenu.tsx:235:DevMenuButtonItem.props.onPress)
  at onPressWrapped(/home/circleci/project/node_modules/@artsy/palette-mobile/dist/elements/Touchable/Touchable.js:29:onPressWrapped)
  at onPress(/home/circleci/project/node_modules/react-native/Libraries/Components/Touchable/TouchableHighlight.js:207:onPress)
  at _performTransitionSideEffects(/home/circleci/project/node_modules/react-native/Libraries/Pressability/Pressability.js:756:_performTransitionSideEffects)
  at _receiveSignal(/home/circleci/project/node_modules/react-native/Libraries/Pressability/Pressability.js:693:_receiveSignal)
  at onResponderRelease(/home/circleci/project/node_modules/react-native/Libraries/Pressability/Pressability.js:524:responderEventHandlers.onResponderRelease)
  at apply(native)
  at invokeGuardedCallbackImpl(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:22:invokeGuardedCallbackImpl)
  at apply(native)
  at invokeGuardedCallback(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:40:invokeGuardedCallback)
  at apply(native)
  at invokeGuardedCallbackAndCatchFirstError(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:53:invokeGuardedCallbackAndCatchFirstError)
  at executeDispatch(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:73:executeDispatch)
  at executeDispatchesAndReleaseTopLevel(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1125:executeDispatchesAndReleaseTopLevel)
  at forEach(native)
  at forEachAccumulated(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:361:forEachAccumulated)
  at anonymous(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1160:batchedUpdates$argument_0)
  at batchedUpdatesImpl(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:8094:batchedUpdatesImpl)
  at batchedUpdates(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1106:batchedUpdates)
  at _receiveRootNodeIDEvent(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1137:_receiveRootNodeIDEvent)
  at receiveTouches(/home/circleci/project/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1209:ReactNativePrivateInterface.RCTEventEmitter.register$argument_0.receiveTouches)
  at apply(native)
  at __callFunction(/home/circleci/project/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:417:__callFunction)
  at anonymous(/home/circleci/project/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:114:__guard$argument_0)
  at __guard(/home/circleci/project/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:__guard)
  at callFunctionReturnFlushedQueue(/home/circleci/project/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:callFunctionReturnFlushedQueue)

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 18 (7 by maintainers)

Most upvoted comments

after the fix

Bundle is now 0 as expected: Screenshot 2023-05-15 at 14 36 33

And attaching the correctly symbolicated trace:

Screenshot 2023-05-15 at 14 33 35

Thanks for all the links and details, source maps don’t work for you when you use Hermes if I’m not mistaken.

This should be fixed by using one command for uploading the source maps instead of two.

Could you update your sentry_upload_sourcemap like follow and remove sentry_upload_file:

    sentry_upload_sourcemap(auth_token: ENV['SentryUploadAuthKey'],
                          sentry_cli_path: sentry_cli_path,
                            org_slug: org_slug,
                            project_slug: project_slug,
                            version: sentry_release_name,
                            dist: dist_version,
+                            sourcemap: [bundle_path, source_map_path],
                            rewrite: true)

Make sure that bundle_path and source_map_path are pointing to the Hermes bundle and combined source map. When you check the bundle in sentry it should show as 0 Bytes file, this is correct for Hermes.

Perfect! Thanks again!

@gkartalis Got it, I will close this for now. In case there would be something more we can reopen it or create a new issue.

@krystofwoldrich thanks! Trying it now and will get back to you with the results!

About upgrading to sentry 5 will have to talk it through with the team and will also let you know!