react-native: fix sourcemap support on iOS (#324)

Co-authored-by: Sebastian Alex <sebastian.alex@saucelabs.com>

Author: perf2711

examples/sdk/reactNative/ios-hermesc.sh

@@ -1,21 +1,28 @@
-#/bin/bash
+#!/bin/bash
+
+set -e 
+set -x
 
 # This script shows how process your application code with source maps and hermesc. By using this script, Backtrace integration can process
 # your source code to generate valid source map files. This script does exactly the same what the hermesc script does, with one exception - 
 # before the native library is generated, this script will process source code and source map to generate output needed in next steps for source map integration.
 
 
-HERMES_ENGINE_PATH="$PODS_ROOT/hermes-engine"
-[ -z "$HERMES_CLI_PATH_OVERRIDE" ] && HERMES_CLI_PATH_OVERRIDE="$HERMES_ENGINE_PATH/destroot/bin/hermesc"
-
+hermes_engine_path="$PODS_ROOT/hermes-engine"
+[ -z "$HERMES_CLI_PATH_OVERRIDE" ] && HERMES_CLI_PATH_OVERRIDE="$hermes_engine_path/destroot/bin/hermesc"
 
-APP_BUNDLE_FILE="${BASH_ARGV[0]}"
+app_bundle_file="${BASH_ARGV[0]}"
 
-if [[ ! -f "$APP_BUNDLE_FILE" ]]; then
-    echo "error: File $APP_BUNDLE_FILE does not exist. " >&2
+if [[ ! -f "$app_bundle_file" ]]; then
+    echo "error: File $app_bundle_file does not exist. " >&2
     exit 2
 fi
 
-npx --yes @backtrace/javascript-cli process --path=$APP_BUNDLE_FILE
+# check and assign NODE_BINARY env
+source "$REACT_NATIVE_PATH/scripts/node-binary.sh"
+
+backtrace_js_path="${REACT_NATIVE_PATH}/../.bin/backtrace-js"
+
+"$NODE_BINARY" "$backtrace_js_path" process --path="$app_bundle_file"
 
-$HERMES_CLI_PATH_OVERRIDE $@
+$HERMES_CLI_PATH_OVERRIDE "$@"

examples/sdk/reactNative/ios-sourcemaps.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+# This script runs backtrace-js on given path and using given config.
+# In this example, backtrace-js will process and upload sourcemaps.
+# This should be executed by the iOS build after creating the .jsbundle file.
+
+set -e
+set -x
+
+script_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+config_path=$BACKTRACE_JS_CONFIG
+bundle_path=$BACKTRACE_JS_BUNDLE_PATH
+
+if [[ ! -f "$bundle_path" ]]; then
+    echo "warn: File $bundle_path does not exist. \
+    Try switching to a Release build. \
+    Sourcemaps will not be processed."
+
+    exit 0
+fi
+
+# path to react-native module dir relative from this script
+react_native_dir="${script_dir}/node_modules/react-native"
+backtrace_js_path="${script_dir}/node_modules/.bin/backtrace-js"
+
+# check and assign NODE_BINARY env
+source "$react_native_dir/scripts/node-binary.sh"
+
+# run backtrace-js on bundle
+"$NODE_BINARY" "$backtrace_js_path" run \
+    --config "$config_path" \
+    --path "$bundle_path"

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

@@ -45,7 +45,7 @@
 		5DCACB8F33CDC322A6C60F78 /* libPods-reactNative.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-reactNative.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = reactNative/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		89C6BE57DB24E9ADA2F236DE /* Pods-reactNative-reactNativeTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-reactNative-reactNativeTests.release.xcconfig"; path = "Target Support Files/Pods-reactNative-reactNativeTests/Pods-reactNative-reactNativeTests.release.xcconfig"; sourceTree = "<group>"; };
-		CFB9667E00B6B43022D1D583 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = reactNative/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
+		CFB9667E00B6B43022D1D583 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xml; name = PrivacyInfo.xcprivacy; path = reactNative/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
 
@@ -269,7 +269,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "set -e\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";
+			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";
 		};
 		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -590,10 +590,7 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					" ",
-				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -666,10 +663,7 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					" ",
-				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

examples/sdk/reactNative/ios/reactNative.xcodeproj/xcshareddata/xcschemes/reactNative.xcscheme

@@ -41,7 +41,7 @@
       </Testables>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"

examples/sdk/reactNative/package-lock.json

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