React Native "Source code was not found" (hashed bundle name)

Environment

How do you use Sentry? Sentry SaaS

Which SDK and version?

{
  "dependencies": {
    ...
    "@sentry/react-native": "^3.1.1",
    "react-native": "~0.63.4",
    ...
  },
}

Steps to Reproduce

Add Sentry to React Native project (configured as below) and create a release.

Expected Result

I expected Sentry to correctly detect the name of/path to my uploaded source map.

Actual Result

I’m getting this error:

Here are my uploaded artifacts:

I understand that these file names are supposed to match, but I’m unclear as to how I can match them up if Sentry is looking for those hashed bundle names (different hashes for each release it seems). Hopefully I’m missing something pretty obvious and this is an easy fix.

Here’s my config:

Sentry.init({
  dsn: "https://[e-mail]/XXXX",
  debug: process.env.$ENVIRONMENT === "qa" || process.env.$ENVIRONMENT === "uat",
  tracesSampleRate: 0.25,
  integrations: [new Sentry.ReactNativeTracing({ routingInstrumentation })],
});

Any help you can provide would be much appreciated!

[jennmueng]

@sethcwhiting I’m not sure myself and I have never worked with building apps on AppCenter, so assuming that these bundle hashes are generated by AppCenter, can you test and see if you add this integration, does sourcemaps work:

  integrations: [new RewriteFrames({
        iteratee: (frame: StackFrame) => {
          if (frame.filename) {
            frame.filename = frame.filename
              .replace(/^file:\/\//, "")
              .replace(/^address at /, "")
              .replace(/^.*\/[^.]+(\.app|CodePush|.*(?=\/))/, "");

             if (
              frame.filename !== "[native code]" &&
              frame.filename !== "native"
             ) {
              const appPrefix = "app://";
              // We always want to have a triple slash
              frame.filename =
                frame.filename.indexOf("/") === 0
                  ? `${appPrefix}${frame.filename}`
                  : `${appPrefix}/${frame.filename}`;
            }

           // Everything above this line is what we already do by default
           // Here it just replaces the filename for the bundle-hash files to main.jsbundle
           if (frame.filename.startsWith("app:///bundle-")) {
              frame.filename = "app:///main.jsbundle";
            }
          }
          return frame;
         },
      })]

This is just the default frame rewriting code we already have in the SDK by default, however just to see if just renaming the bundle name will work.

[sethcwhiting]

@jennmueng @marandaneto Thanks so much for your help 🙏🙏🙏