feat(react-native): new source maps generation script with support for hermes

[andreybutov]

Status

READY

Description

This PR replaces the original honeybadger-generate-sourcemaps.sh script with the honeybadger-upload-sourcemaps.sh script which has support for Hermes, and automatically uploads the generated sourcemaps to Honeybadger. The section on source maps in README.md has also been updated with usage instructions.

Todo

• Documents source map generation and upload for react-native, closes [react-native] document sourcemap upload procedure  #1029
• Comes with a new script to generate and upload source maps, closes [react-native] Can't get source maps to work #1066
• Adds Hermes support - closes Source maps not working with React Native + Hermes on Android #1159

[BethanyBerkowitz]

I tried running this and ran into two issues:

1. I couldn't get npx honeybadger-upload-sourcemaps to run in my test project until I installed the package globally. I do vaguely remember having a problem with the previous npx honeybadger-generate-sourcemaps command as well.. unfortunately I did not write down what I did to fix that 😆. Hopefully the answer was not "install it globally", because that's not the right way to do it. Anyway I don't think this is an issue with this PR, but maybe either you our @subzero10 has an idea for me on this.
2. After installing globally, the output of the script I got was

Hermes is enabled ...
Error: The Hermes compiler executable for Android was not found in the expected locations.

Happy to help debug, but this is just what I got on the first run.

[subzero10]

I couldn't get npx honeybadger-upload-sourcemaps to run in my test project until I installed the package globally. I do vaguely remember having a problem with the previous npx honeybadger-generate-sourcemaps command as well.. unfortunately I did not write down what I did to fix that 😆. Hopefully the answer was not "install it globally", because that's not the right way to do it. Anyway I don't think this is an issue with this PR, but maybe either you our @subzero10 has an idea for me on this.

Yep, I had this issue multiple times as well. I think it works OK if the package is published on npm.

[andreybutov]

@BethanyBerkowitz @subzero10

I couldn't get npx honeybadger-upload-sourcemaps to run in my test project until I installed the package globally.

I don't know of a command to prevent npx from installing something globally if it doesn't exist locally to run it. My understanding is that if it doesn't find a file in ./node_modules/./bin/, it will download it, execute it, and clean up after itself. In my testing, when I did an npm build && npm pack, and then installed the HB library from the tgz, the honeybadger-upload-sourcemaps script was properly symlinked to in ./node_modules/.bin, and it executed from there when I ran npx.

Error: The Hermes compiler executable for Android was not found in the expected locations.

I made some updates to the script. @BethanyBerkowitz can you please try to run it again? If you get the same error, could you let me know what version of react-native in the package.json of your test app? Thanks!

[BethanyBerkowitz]

1. npx honeybadger-upload-sourcemaps

Yahoo, I saw the upload now! Not sure if it's because of your changes or if I screwed something up before, but definitely an improvement.

Generating the Android source map ...
Generating the iOS source map ...
Hermes is enabled ...
Generating Hermes Android source map ...
Generating Hermes iOS source map ...
Source maps generated. iOS: Uploading to Honeybadger ...
Source maps uploaded to Honeybadger.

My problem now is that I still don't see the sourcemap applied. I tried throwing a JS error using the examples/react-native-cli project on the ios simulator. I tried npm run ios and also release mode npm run ios:release.

I can see the sourcemaps uploaded ✅

But not applied ❌

I did check that the revision matched:

[andreybutov]

@BethanyBerkowitz

My problem now is that I still don't see the sourcemap applied. I tried throwing a JS error using the examples/react-native-cli project on the ios simulator.

Yes, I'm still working out with @joshuap why the backend isn't applying the uploaded iOS maps, but this PR was more about the introduction of hermes support for Android source maps (for this: #1159 ). iOS are still an outstanding issue that I will look into with a separate PR, as needed.

[BethanyBerkowitz]

@andreybutov Glad to hear the iOS thing is a known issue!

I tested using android, and saw the sourcemaps get applied, both in the react-native-cli example project and the expo example project 🎉 🎉 🎉

In the expo app, the script at first errored with The Hermes compiler executable for iOS was not found in the expected location: .../expo-app/node_modules/.bin/../../ios/Pods/hermes-engine/destroot/bin/hermesc. This was because pod install hadn't run. In Expo, you don't actually need to run pod install yourself, it does it for you when you run npx expo run:ios. But either way, it might be helpful if this error included Did you install Pods? (or something similar). Pretty minor, I don't feel like I need to re-review if you decide to add that.

[subzero10]

iOS are still an outstanding issue that I will look into with a separate PR, as needed.

I create #1182 to track this.

[subzero10]

Note to me:

• We should update the docs project to read the updated README.md from this repo.

[subzero10]

I left a couple of comments, but nothing blocking!

[andreybutov]

@BethanyBerkowitz

it might be helpful if this error included Did you install Pods? (or something similar).

You're right! I added the additional info to the error message. Thanks!

[andreybutov]

@subzero10 I think this PR is good to go.

[subzero10]

Done! This should be available with v6.2.0.