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

Author: Konrad Dysput

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

@@ -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/ios-hermesc.sh

@@ -0,0 +1,62 @@
+#!/bin/bash
+
+# Script responsible for preprocessing source maps with debugid and uploading it to Backtrace via backtrace-js. 
+# Usage:    ./ios-sourcemap-upload.sh <source_map_file_path> <debug_id_file_path> <backtrace_configuration_path
+# Parameters:
+#   <source_map_file_path>        (Required) Path to the source map file.
+#   <debug_id_file_path>            (Required) path to generated backtrace debug id.
+#   <backtrace_configuration_path>      (Required) Path to the .backtracejsrc configuration file.
+#
+# Adjusting metro configuration is required in order to correctly use debug_id available in the debug_id_file_path.
+
+
+set -e
+set -x
+
+if [ -z "$1" ]; then
+    echo "Error: Missing path to the source map file."
+    exit 1
+fi
+
+source_map_file_path="$1"
+
+# Check if the file exists
+if [ ! -f "$source_map_file_path" ]; then
+    echo "Error: File '$source_map_file_path' does not exist."
+    exit 1
+fi
+
+DEBUG_ID_PATH_ENV="DEBUG_ID_PATH"
+
+debug_id_file_path=${!DEBUG_ID_PATH_ENV:-${2:-}}
+
+if [ ! -f "$debug_id_file_path" ]; then
+    echo "Error: File '$debug_id_file_path' does not exist."
+    exit 1
+fi
+
+if [ -z "$3" ]; then
+    echo "Error: Missing path to the .backtracejsrc file."
+    exit 1
+fi
+
+backtrace_configuration_path="$3"
+
+debug_id=$(<"$debug_id_file_path")
+
+jq ". += {\"debugId\": \"$debug_id\"}" "$source_map_file_path" > tmp.map && mv tmp.map $source_map_file_path
+
+script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# path to react-native module dir relative from this script
+backtrace_js_path="${script_dir}/node_modules/.bin/backtrace-js"
+
+echo "Backtrace JS PATH $backtrace_js_path"
+
+# check and assign NODE_BINARY env
+source "$REACT_NATIVE_PATH/scripts/node-binary.sh"
+
+# run backtrace-js on bundle
+"$NODE_BINARY" "$backtrace_js_path" upload \
+    -p "$source_map_file_path" \
+    --config "$backtrace_configuration_path"

examples/sdk/reactNative/ios-sourcemap-upload.sh

@@ -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\nexport SOURCEMAP_FILE=\"$(pwd)/../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\nSOURCE_MAP_UPLOAD=\"$(pwd)/../ios-sourcemap-upload.sh\"\nBACKTRACE_JS_CONFIG=\"$(pwd)/../.backtracejsrc\"\n/bin/sh -c \"$SOURCE_MAP_UPLOAD $SOURCEMAP_FILE $TARGET_BUILD_DIR/.backtrace-sourcemap-id $BACKTRACE_JS_CONFIG\" \n\n";
 		};
 		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;

examples/sdk/reactNative/ios-sourcemaps.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/processSourceMap');
 
 /**
  * Metro configuration
@@ -8,12 +9,16 @@ 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: {
+        async customSerializer(entryPoint, preModules, graph, options) {
+            return backtraceSourceMapProcessor.processSourceMap(entryPoint, preModules, graph, options);
+        },
+    },
 };
-
 module.exports = mergeConfig(getDefaultConfig(__dirname), config);

examples/sdk/reactNative/ios/reactNative.xcodeproj/project.pbxproj

@@ -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",

examples/sdk/reactNative/metro.config.js

@@ -0,0 +1,48 @@
+import groovy.json.JsonBuilder
+import groovy.json.JsonSlurper
+
+
+tasks.register("uploadSourceMapsToBacktrace") {
+    group = "backtrace"
+    description = "This task uploads source maps generated by the react-native builder to Backtrace based on the .backtracejsrc file."
+
+    doLast {
+        // Fetch the build variant (debug or release)
+        // Default to 'release' if not set
+        def buildVariant = project.hasProperty("buildVariant") ? project.buildVariant.toLowerCase() : "release"
+
+        def debugIdPathEnv = System.getenv("DEBUG_ID_PATH")
+
+        def debugIdFile = debugIdPathEnv ? file(debugIdPathEnv) : layout.buildDirectory
+                .dir("intermediates/sourcemaps/react/${buildVariant}/.backtrace-sourcemap-id")
+                .get()
+                .asFile
+
+        if (!debugIdFile.exists()) {
+            println("Backtrace: Cannot find .backtrace-sourcemap-id debug info.")
+            return
+        }
+
+        def sourcemapDestinationDirectory = layout.buildDirectory.dir("generated/sourcemaps/react").get().asFile
+        def mapFiles = fileTree(dir: sourcemapDestinationDirectory, include: '**/*.map').files
+        def mapFile = mapFiles ? mapFiles.iterator().next() : null
+
+        if (!mapFile) {
+            println("Backtrace: Cannot find final source map file.")
+            return
+        }
+
+        def jsonSlurper = new JsonSlurper()
+        def mapData = jsonSlurper.parse(mapFile)
+        mapData.debugId = debugIdFile.text
+        def jsonBuilder = new JsonBuilder(mapData)
+        mapFile.text = jsonBuilder.toPrettyString()
+
+        // Execute Backtrace JS CLI to process upload processed source maps
+        def command = ["npx", "--yes", "@backtrace/javascript-cli", "upload", "-p", mapFile.absolutePath]
+        exec {
+            workingDir file("$rootProject.projectDir/..")
+            commandLine command
+        }
+    }
+}

examples/sdk/reactNative/package-lock.json

@@ -0,0 +1,62 @@
+const bundleToString = require('metro/src/lib/bundleToString');
+const baseJSBundle = require('metro/src/DeltaBundler/Serializers/baseJSBundle');
+const CountingSet = require('metro/src/lib/CountingSet').default;
+const fs = require('fs');
+const path = require('path');
+const { DebugIdGenerator, SourceProcessor } = require('@backtrace/sourcemap-tools');
+
+const DEBUG_ID_PATH = process.env.DEBUG_ID_PATH;
+
+/**
+ * Process metro build with source map support powered by Backtrace.
+ */
+function processSourceMap(entryPoint, preModules, graph, options) {
+    const bundle = bundleToString(baseJSBundle(entryPoint, preModules, graph, options));
+
+    // development build - skip source map upload
+    if (graph.transformOptions.hot || graph.transformOptions.dev) {
+        return bundle;
+    }
+
+    // no source map option set
+    const sourceMapOutputPathParameter = process.argv.indexOf('--sourcemap-output');
+    if (sourceMapOutputPathParameter === -1) {
+        return bundle;
+    }
+
+    const sourceMapOutputPath = process.argv[sourceMapOutputPathParameter + 1];
+    const backtraceSourceMapId =
+        DEBUG_ID_PATH ?? path.join(path.dirname(sourceMapOutputPath), '.backtrace-sourcemap-id');
+
+    const debugIdGenerator = new DebugIdGenerator();
+    const sourceProcessor = new SourceProcessor(debugIdGenerator);
+    const { source, debugId } = sourceProcessor.processSource(bundle.code);
+    const snippet = debugIdGenerator.generateSourceSnippet(debugId);
+
+    console.debug(`Backtrace: saving debugId ${debugId} to ${backtraceSourceMapId}.`);
+    fs.writeFileSync(backtraceSourceMapId, debugId);
+
+    const debugIdPrepend = {
+        dependencies: new Map(),
+        getSource: () => Buffer.from(snippet),
+        inverseDependencies: new CountingSet(),
+        path: '__prelude__',
+        output: [
+            {
+                type: 'js/script/virtual',
+                data: {
+                    code: snippet,
+                    lineCount: 1,
+                    map: [],
+                },
+            },
+        ],
+    };
+    preModules.unshift(debugIdPrepend);
+    return {
+        ...bundle,
+        code: source,
+    };
+}
+
+module.exports = { processSourceMap };