react-native: simplify source map processing flow (#333)

* react-native: Simplify react-native source map injection flow

* react-native: Flow adjustements & Code review

* react-native: Demo source map description

* react-native: Bring standard serialization method, formatting and fix environment variable read

* react-native: override correctly path to the debug id file in the source map upload script

* react-native: move upload script to the react-native directory and process source map via node, not via jq

* react-native: use basename of the script

Co-authored-by: Sebastian Alex <sebapotok@gmail.com>

* react-native: uplaod script- remove shebang from addDebugIdToSourceMap

* react-native: move scripts into the script directory and adjust paths to them in readme/xcode

---------

Co-authored-by: Konrad Dysput <konrad.dysput@saucelabs.com>
Co-authored-by: Sebastian Alex <sebapotok@gmail.com>

Author: 3 people

examples/sdk/reactNative/README.md

@@ -8,53 +8,64 @@ This example app shows features available in the @backtrace/react-native package
 2. `npm install`. If you're on iOS, navigate to the `ios` directory and run `pod install`
 3. `npm run start` and pick desired platform
 
-#### Source maps
+### Source maps
+
+This example application is integrated with the source map support. Once you change the .backtracejsrc file, source maps will be automatically uploaded to your project.
 
 Before executing any step:
 
--   Please update .backtracejsrc file with your symbols submission URL and your sourcemap settings.
+> Please update .backtracejsrc file with your symbols submission URL and your sourcemap settings.
 
-On Android: You can verify our example app with the source map support. In order to do that, please use the
-android-sourcemap.sh script.
+Backtrace is compatible with metro build system. To enable source map support, set a `customSerializer` method in the `metro.config.js` file to the `processSourceMap` function available in `@backtrace/react-native/scripts/processSourceMap`.
 
-```bash
-./android-sourcemap.sh ./optional-path-to-directory
 ```
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const backtraceSourceMapProcessor = require('@backtrace/react-native/scripts/processSourceMap');
 
-The script will prepare a release APK version of your React Native application with the sourcemap and Hermes support.
-The APK can be found in the ./android/app/build/outputs/apk/release/ directory.
+const config = {
+    serializer: {
+        customSerializer: backtraceSourceMapProcessor.processSourceMap
+    },
+};
+module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 
-On iOS: Backtrace simplify the flow needed to upload source maps by instructing hermesc how to generate and prepare
-source maps for your application. Without this additional step, react-native will not instruct your application to
-support Backtrace source maps.
+```
 
-In order to prepare your application for source maps and automatically upload them to Backtrace, modify your "Build
-Phase" with the following code:
+Add Backtrace to build automation to ensure every build has source map support.
 
-```bash
-set -e
+In order to upload source maps to Backtrace, you can:
 
-# destination source map directory
-SOURCE_MAP_DIR="$(pwd)/../build"
-mkdir -p $SOURCE_MAP_DIR
+**On Android:**
 
-export SOURCEMAP_FILE="$SOURCE_MAP_DIR/main.js.map";
-WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
-REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
+Enable source map support in `app/build.gradle` by uncommenting hermes source map flags. With additional parameters, source maps will be generated. To automatically upload them to Backtrace, you can use the gradle task available the @backtrace/react-native library.
 
-# use hermesc script provided by Backtrace to populate source maps
-# if you dont use hermes support, please skip this step.
-export HERMES_CLI_PATH="$(pwd)/../ios-hermesc.sh"
+`apply from: "$rootDir/../node_modules/@backtrace/react-native/android/upload-sourcemaps.gradle"`
 
-/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+Once you import the gradle task, you can simply add it to your flow for any build/assemble tasks.
 
-# copy javascript build output to the build directory
-cp "$CONFIGURATION_BUILD_DIR/main.jsbundle" $SOURCE_MAP_DIR
+```gradle
+tasks.matching {
+    it.name.startsWith("assemble") || it.name.startsWith("build")
+}.configureEach { task ->
+     task.finalizedBy("uploadSourceMapsToBacktrace")
+}
+```
 
-# process source map with javascript code
-npx --yes @backtrace/javascript-cli run  --config "$(pwd)/../.backtracejsrc" --path "$SOURCE_MAP_DIR/main.jsbundle"
+**On iOS.**
 
-```
+Modify the code in the `Bundle React Native code and images` step in the `Build Phases` of your xcode project setting. In the end of the script, you can include the code below, to upload source maps directly to Backtrace after generating the applicaiton.
 
-Note: this modification copy the output of the javascript build into the build directory created in your application
-folder. Please also put ios-hermesc.
+```bash
+project_directory="$(pwd)/.."
+# enable source map support
+export SOURCEMAP_FILE="$project_directory/main.jsbundle.map"
+
+...
+
+# upload source maps to Backtrace
+source_map_upload="$project_directory/node_modules/@backtrace/react-native/scripts/ios-sourcemap-upload.sh"
+backtrace_js_config="$project_directory/.backtracejsrc"
+
+/bin/sh -c "$source_map_upload $SOURCEMAP_FILE $TARGET_BUILD_DIR/.backtrace-sourcemap-id $backtrace_js_config $project_directory"
+
+```

examples/sdk/reactNative/android-sourcemap.sh

@@ -1,5 +1,7 @@
 apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
+apply from: "$rootDir/../node_modules/@backtrace/react-native/android/upload-sourcemaps.gradle"
+
 
 /**
  * This is the configuration block to customize your React Native Android app.
@@ -47,7 +49,7 @@ react {
     // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
-    // hermesFlags = ["-O", "-output-source-map"]
+    hermesFlags = ["-O", "-output-source-map"]
 
     /* Autolinking */
     autolinkLibrariesWithApp()
@@ -116,3 +118,9 @@ dependencies {
         implementation jscFlavor
     }
 }
+
+tasks.matching { 
+    it.name.startsWith("assemble") || it.name.startsWith("build") 
+}.configureEach { task ->
+     task.finalizedBy("uploadSourceMapsToBacktrace")
+}

examples/sdk/reactNative/android/app/build.gradle

@@ -269,7 +269,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "set -e\nset -x\n# destination source map directory\nSOURCE_MAP_DIR=\"$(pwd)/../build\"\nmkdir -p $SOURCE_MAP_DIR\n\nexport SOURCEMAP_FILE=\"$SOURCE_MAP_DIR/main.js.map\";\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n# use hermesc script provided by Backtrace to populate source maps\n# if you dont use hermes support, please skip this step.\nexport HERMES_CLI_PATH=\"$(pwd)/../ios-hermesc.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n\n# copy javascript build output to the build directory\ncp \"$CONFIGURATION_BUILD_DIR/main.jsbundle\" $SOURCE_MAP_DIR \n\nPROCESS_SOURCEMAPS_SCRIPT=\"$(pwd)/../ios-sourcemaps.sh\"\nexport BACKTRACE_JS_CONFIG=\"$(pwd)/../.backtracejsrc\"\nexport BACKTRACE_JS_BUNDLE_PATH=\"$SOURCE_MAP_DIR/main.jsbundle\"\n \n# process source map with javascript code\n/bin/sh -c \"$WITH_ENVIRONMENT $PROCESS_SOURCEMAPS_SCRIPT\"\n";
+			shellScript = "set -e\nproject_directory=\"$(pwd)/..\"\n# enable source map support\nexport SOURCEMAP_FILE=\"$project_directory/main.jsbundle.map\"\n\nWITH_ENVIRONMENT=\"$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"$REACT_NATIVE_PATH/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n\n# upload source maps to Backtrace\nsource_map_upload=\"$project_directory/node_modules/@backtrace/react-native/scripts/ios-sourcemap-upload.sh\"\nbacktrace_js_config=\"$project_directory/.backtracejsrc\"\n\n/bin/sh -c \"$source_map_upload $SOURCEMAP_FILE $TARGET_BUILD_DIR/.backtrace-sourcemap-id $backtrace_js_config $project_directory\" \n\n";
 		};
 		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;

examples/sdk/reactNative/ios-hermesc.sh

@@ -1,5 +1,6 @@
-const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
+const backtraceSourceMapProcessor = require('@backtrace/react-native/scripts/processSourceMap');
 
 /**
  * Metro configuration
@@ -8,12 +9,14 @@ const path = require('path');
  * @type {import('metro-config').MetroConfig}
  */
 const config = {
-  watchFolders: [
-    path.resolve('../../../packages/react-native'),
-    path.resolve('../../../packages/react-native/node_modules'),
-    path.resolve('../../../node_modules'),
-    path.resolve('../../../packages/sdk-core'),
-  ],
+    watchFolders: [
+        path.resolve('../../../packages/react-native'),
+        path.resolve('../../../packages/react-native/node_modules'),
+        path.resolve('../../../node_modules'),
+        path.resolve('../../../packages/sdk-core'),
+    ],
+    serializer: {
+        customSerializer: backtraceSourceMapProcessor.processSourceMap,
+    },
 };
-
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);

examples/sdk/reactNative/ios-sourcemaps.sh

@@ -18,6 +18,7 @@
         "@babel/preset-env": "^7.20.0",
         "@babel/runtime": "^7.20.0",
         "@backtrace/javascript-cli": "file:../../../tools/cli",
+        "@backtrace/sourcemap-tools": "file:../../../tools/sourcemap-tools",
         "@react-native/babel-preset": "0.75.3",
         "@react-native/eslint-config": "0.75.3",
         "@react-native/metro-config": "0.75.3",