iOS source map support (#244)

* iOS source map support

* Modify xcode project

* Remove project reference

* Clean up project information

* Readme update

* Use npx everywhere

* Correct npx usage

Author: konraddysput

examples/sdk/reactNative/README.md

@@ -10,6 +10,10 @@ This example app shows features available in the @backtrace/react-native package
 
 #### Source maps
 
+Before executing any step:
+
+-   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.
 
@@ -19,3 +23,38 @@ android-sourcemap.sh script.
 
 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.
+
+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:
+
+```bash
+set -e
+
+# destination source map directory
+SOURCE_MAP_DIR="$(pwd)/../build"
+mkdir -p $SOURCE_MAP_DIR
+
+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"
+
+# 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"
+
+/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
+
+# copy javascript build output to the build directory
+cp "$CONFIGURATION_BUILD_DIR/main.jsbundle" $SOURCE_MAP_DIR
+
+# process source map with javascript code
+npx --yes @backtrace/javascript-cli run  --config "$(pwd)/../.backtracejsrc" --path "$SOURCE_MAP_DIR/main.jsbundle"
+
+```
+
+Note: this modification copy the output of the javascript build into the build directory created in your application
+folder. Please also put ios-hermesc.

examples/sdk/reactNative/android-sourcemap.sh

@@ -26,7 +26,7 @@ npx react-native bundle \
 
 
 # add source map identifier to final javascript bundle
-npx backtrace-js process --path=$BUNDLE_PATH
+npx --yes @backtrace/javascript-cli process --path=$BUNDLE_PATH
 
 HBC_OUTPUT="$BUILD_DIR/app.hbc"
 HBC_MAP_OUTPUT="$HBC_OUTPUT.map"
@@ -48,7 +48,7 @@ node ./node_modules/react-native/scripts/compose-source-maps.js \
     -o $SOURCE_MAP_PATH
 
 # upload data to Backtrace
-backtrace-js run $BUNDLE_PATH
+npx --yes @backtrace/javascript-cli run $BUNDLE_PATH
 
 # prepare android application
 mkdir -p ./android/app/src/main/assets

examples/sdk/reactNative/ios-hermesc.sh

@@ -0,0 +1,21 @@
+#/bin/bash
+
+# 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"
+
+
+APP_BUNDLE_FILE="${BASH_ARGV[0]}"
+
+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
+
+$HERMES_CLI_PATH_OVERRIDE $@

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

@@ -264,7 +264,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "set -e\n\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
+			shellScript = "set -e\n\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=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/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 \n# process source map with javascript code\nnpx --yes @backtrace/javascript-cli run --config \"$(pwd)/../.backtracejsrc\" --path \"$SOURCE_MAP_DIR/main.jsbundle\" \n";
 		};
 		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;