rnx-kit bundle - bugsnag can't apply sourcemaps

[adamivancza]

Hey there,

Was anyone able to make rnx-kit produced sourcemaps work with bugsnag?

I have the following config for bundler:

"rnx-kit": {
    "bundle": {
      "hermes": true,
      "treeShake": false,
      "entryFile": "index.js",
      "targets": [
        "android",
        "ios"
      ],
      "platforms": {
        "android": {
          "bundleOutput": "dist/android/main.android.bundle",
          "sourcemapOutput": "dist/android/main.android.bundle.map",
          "assetsDest": "dist/android/res"
        },
        "ios": {
          "bundleOutput": "dist/ios/main.jsbundle",
          "sourcemapOutput": "dist/ios/main.jsbundle.map",
          "assetsDest": "dist/ios"
        }
      },

Using iOS as an example I do the followings:

1. include the main.jsbundle.hbc file in the app's bundle
2. upload the main.jsbundle.hbc file (as bundle) along with the main.jsbundle.hbc.map file (as sourcemap) to Bugsnag

Now this results with unreadable stacktraces as Bugsnag is showing bytecode.

(native) apply
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:987416 anonymous
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:1503444 anonymous
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:2443091 ?anon_0_
    (native) next
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:535064 n
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:535336 v
    /Users/distiller/react-native/packages/react-native/sdks/hermes/build_iphoneos/lib/InternalBytecode/InternalBytecode.js:53:16 tryCallOne
    /Users/distiller/react-native/packages/react-native/sdks/hermes/build_iphoneos/lib/InternalBytecode/InternalBytecode.js:139:27 anonymous
    (native) apply
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:251609 anonymous
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:250606 p
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:250768 N
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:252682 callReactNativeMicrotasks
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:106691 value
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:105826 anonymous
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:106568 value
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:105737 value
    /private/var/containers/Bundle/Application/D3AA2CF4-82E4-4465-8D62-8CE17EB2ED27/myapp/main.jsbundle:1:105680 value

I did some digging and saw that the main.jsbundle.hbc.map is indeed not containing the sourcemap I would expect. Any suggestion which files should I even upload when I use Hermes?

[tido64]

Do you have a repro for this? We don't use Bugsnag, but I can't repro the issue you're seeing:

% file dist/main+esbuild.android.bundle.hbc
dist/main+esbuild.android.bundle.hbc: Hermes JavaScript bytecode, version 94

% file dist/main+esbuild.android.bundle.hbc.map
dist/main+esbuild.android.bundle.hbc.map: JSON data

[adamivancza]

Yeah but the hbc.map file doesn't have any meaningful data - I've attached ours.

main.jsbundle.hbc.map.zip

[tido64]

This is the output I got as well. It makes sense that .hbc.map only has a single entry because the input to hermesc is the JS bundle. I had a look around and from what I've read, react-native includes a script for combining source maps:

node node_modules/react-native/scripts/compose-source-maps.js dist/main.jsbundle.map dist/main.jsbundle.hbc.map -o dist/main.jsbundle.map

(Source: https://petrlz63.medium.com/sentry-source-maps-with-hermes-in-react-native-9de970a6699f)

Does this work for you? If it does, I think it makes sense for us to do this out-of-box whenever Hermes is enabled.

[adamivancza]

Hmm this is interesting - will give it a try and let you know!

[tido64]

FYI, I have a draft PR for this here: #2915

[adamivancza]

Weirdly this works perfectly for iOS, but not for Android.

iOS stacktrace is correct:

But Android stacktrace is incorrect:

Any idea what can cause this? 🤔

[tido64]

That's really odd. Android and iOS go through the exact same code paths. We don't special case on platforms so there really shouldn't be any difference between the two.

[adamivancza]

So I've diffed the iOS and Android sourcemaps twice, one for the regular sourcemaps and one for the hermes sourcemaps. Weirdly there are differences:

Regular sourcemap comparison (which seems right):
regular-sourcemap-diff.zip

Hermes sourcemap comparison:
hermes-sourcemap-diff.zip

just rename zip to HTML - GitHub won't let me attach HTMLs :)

[adamivancza]

omg figured it out 🤦 🤦 🤦
This issue highlighted that I didn't correctly set up the Android side when integrating rnx-kit and the Android app was still using the default RN bundle. Hence this difference on the reported bug...
After properly setting up the Android app it is working all right now!