diff --git a/src/platforms/react-native/manual-setup/codepush.mdx b/src/platforms/react-native/manual-setup/codepush.mdx index 8ff5c552be3a0..29e2daf09a856 100644 --- a/src/platforms/react-native/manual-setup/codepush.mdx +++ b/src/platforms/react-native/manual-setup/codepush.mdx @@ -40,6 +40,7 @@ codePush.getUpdateMetadata().then(update => { Sentry.init({ // ... release: `${update.appVersion}+codepush:${update.label}`, + dist: update.label, }); } }); diff --git a/src/platforms/react-native/manual-setup/hermes.mdx b/src/platforms/react-native/manual-setup/hermes.mdx index c7fd90d1c9670..fb10a04afcaa4 100644 --- a/src/platforms/react-native/manual-setup/hermes.mdx +++ b/src/platforms/react-native/manual-setup/hermes.mdx @@ -22,9 +22,9 @@ If you do not need custom sourcemaps, the `sentry.gradle` build step fully suppo ## Custom Source Maps -If you are manually bundling and building React Native apps for Android, follow this three-step process. For Hermes on iOS, follow the [normal source maps guide](/platforms/react-native/sourcemaps/). +If you are manually bundling and building React Native apps, follow this three-step process. -### Compile for Android +### Compile Sourcemaps 1. Bundle/minify with `metro` (`react-native`) to get the packager source map (`.packager.map`): @@ -32,24 +32,42 @@ If you are manually bundling and building React Native apps for Android, follow npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output index.android.bundle --sourcemap-output index.android.bundle.packager.map ``` +```bash {tabTitle:iOS} +npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output main.jsbundle --sourcemap-output main.jsbundle.packager.map +``` + 2. Compile to bytecode using `hermes` to get the compiler source map (`.hbc.map`): - - - `OS-BIN` is `osx-bin`, `win64-bin`, or `linux64-bin`, depending on which operating system you are using. - - + + +`OS-BIN` is `osx-bin`, `win64-bin`, or `linux64-bin`, depending on which operating system you are using. + + ```bash {tabTitle:Android} node_modules/hermes-engine/{OS-BIN}/hermesc -O -emit-binary -output-source-map -out=index.android.bundle.hbc index.android.bundle ``` +```bash {tabTitle:iOS} +node_modules/hermes-engine/{OS-BIN}/hermesc -O -emit-binary -output-source-map -out=main.jsbundle.hbc main.jsbundle +``` + 3. Merge the two source maps using `compose-source-maps` to get the final source map (`.map`): ```bash {tabTitle:Android} node node_modules/react-native/scripts/compose-source-maps.js index.android.bundle.packager.map index.android.bundle.hbc.map -o index.android.bundle.map ``` +```bash {tabTitle:iOS} +node node_modules/react-native/scripts/compose-source-maps.js main.jsbundle.packager.map main.jsbundle.hbc.map -o main.jsbundle.map +``` + ### Upload the Bundle and Source Maps Upload your source maps following [Step 3 on the normal source maps guide](/platforms/react-native/sourcemaps/#3-upload-the-bundle-and-source-maps). + + + +You will upload the **original** bundle (output from Step 1) and the **composed** source map (output from Step 3) + + diff --git a/src/platforms/react-native/sourcemaps.mdx b/src/platforms/react-native/sourcemaps.mdx index 949de6b52376c..a14c90178c3bf 100644 --- a/src/platforms/react-native/sourcemaps.mdx +++ b/src/platforms/react-native/sourcemaps.mdx @@ -47,9 +47,9 @@ Configure the CLI by reviewing the [configuration guide](/product/cli/configurat ### 2. Generate the bundle and source maps - + -If you use the **Hermes engine** on Android, you will need to [follow this guide to compile source maps for Hermes on Android](/platforms/react-native/manual-setup/hermes/#custom-source-maps). This alternative step is not required for Hermes on iOS and you can continue following the steps below. +If you use the **Hermes engine**, you will need to [follow this guide to compile source maps for Hermes](/platforms/react-native/manual-setup/hermes/#custom-source-maps). @@ -122,3 +122,5 @@ If source maps are still not recognized, check for warnings similar to: ![Missing sources warning](001-manual-sourcemaps.png) The bundle filename needs to match the filename on the event (and shown on the warning) to correctly apply the source maps. + +Find more troubleshooting cases in our [Troubleshooting documentation](/platforms/react-native/troubleshooting/#source-maps). diff --git a/src/platforms/react-native/troubleshooting.mdx b/src/platforms/react-native/troubleshooting.mdx index 83d96da09ae67..1402f330eb518 100644 --- a/src/platforms/react-native/troubleshooting.mdx +++ b/src/platforms/react-native/troubleshooting.mdx @@ -57,9 +57,13 @@ Common fixes to this issue include: [For more details, please read the guide on React Native source maps.](/platforms/react-native/sourcemaps) -### Source Maps with Hermes on Android +### Source Maps With Hermes -You will need to perform some extra steps when using the source maps with the Hermes engine on Android. [You can follow the guide here.](/platforms/react-native/manual-setup/hermes/#custom-source-maps) +Although the build script should already handle this for you most of the time, you may need to perform some extra steps when using the source maps with the Hermes engine. [You can follow the guide here.](/platforms/react-native/manual-setup/hermes/#custom-source-maps). + +### Different Bundles for Different Platforms + +Your app could have different bundles for each platform that it supports, such as iOS and Android. To associate the correct bundle and sourcemap to each platform, you will need a unique release/dist combination for each platform. An easy way to do this is to include the platform name in the `dist` value. ## iOS Build Script Failed