backtrace-labs
diff --git a/‎examples/sdk/browser/package.json
+2-1 b/‎examples/sdk/browser/package.json
+2-1
diff --git a/‎examples/sdk/browser/src/index.ts
+9-2 b/‎examples/sdk/browser/src/index.ts
+9-2
diff --git a/‎examples/sdk/reactNative/.backtracejsrc
+11 b/‎examples/sdk/reactNative/.backtracejsrc
+11
diff --git a/‎examples/sdk/reactNative/README.md
+51 b/‎examples/sdk/reactNative/README.md
+51
diff --git a/‎examples/sdk/reactNative/android-sourcemap.sh
+66 b/‎examples/sdk/reactNative/android-sourcemap.sh
+66
diff --git a/‎examples/sdk/reactNative/android/app/build.gradle
+1-1 b/‎examples/sdk/reactNative/android/app/build.gradle
+1-1
diff --git a/‎examples/sdk/reactNative/ios-hermesc.sh
+21 b/‎examples/sdk/reactNative/ios-hermesc.sh
+21
diff --git a/‎examples/sdk/reactNative/ios/reactNative.xcodeproj/project.pbxproj
+1-1 b/‎examples/sdk/reactNative/ios/reactNative.xcodeproj/project.pbxproj
+1-1
@@ -41,6 +41,7 @@
     },
     "dependencies": {
         "@reduxjs/toolkit": "^1.9.5",
-        "@backtrace/browser": "^0.1.0"
+        "@backtrace/browser": "^0.2.0",
+        "@backtrace/session-replay": "^0.0.1"
     }
 }
@@ -1,8 +1,9 @@
 import { BacktraceClient, BacktraceStringAttachment, createBacktraceReduxMiddleware } from '@backtrace/browser';
+import { BacktraceSessionReplayModule } from '@backtrace/session-replay';
 import { configureStore, createSlice } from '@reduxjs/toolkit';
 import { SUBMISSION_URL } from './consts';
 
-const client = BacktraceClient.initialize({
+const client = BacktraceClient.builder({
     url: SUBMISSION_URL,
     name: '@backtrace/browser-example',
     version: '0.0.1',
@@ -13,7 +14,13 @@ const client = BacktraceClient.initialize({
             prop2: 123,
         },
     },
-});
+})
+    .useModule(
+        new BacktraceSessionReplayModule({
+            maxEventCount: 100,
+        }),
+    )
+    .build();
 
 interface DemoState {
     count: number;
 
@@ -0,0 +1,11 @@
+{
+    "run": {
+        "process": true,
+        "upload": true,
+        "add-sources": true
+    },
+    "upload": {
+        "url": "https://<your-backtrace-url>:6098/post?format=sourcemap&token=<your-symbols-access-token>",
+        "include-sources": true
+    }
+}
@@ -7,3 +7,54 @@ This example app shows features available in the @backtrace/react-native package
 1. Add your universe and token to the SUBMISSION_URL in src/consts.ts
 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
+
+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.
+
+```bash
+./android-sourcemap.sh ./optional-path-to-directory
+```
+
+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.
@@ -0,0 +1,66 @@
+#/bin/bash
+
+# This script shows how to add source map support to any react-native android application.
+# By using it, you can upload source maps to Backtrace and built a release version of the app
+# with hermesc support. This script uses .backtracejsrc file available in your react-native directory.
+# 
+# Additional information: This script prepares your bundle for you. In the release build, to prevent "double" application build
+# while building final apk/aab, in the build.gradle file, please use `debuggableVariants = ["release"]`. Otherwise 
+# Gradle and react-native will try to build the application twice and override application version with source map support.
+
+BUILD_DIR=${1:-build}
+BUNDLE_PATH="$BUILD_DIR/index.android.bundle"
+SOURCE_MAP_PATH="$BUILD_DIR/index.android.js.map"
+
+mkdir -p $BUILD_DIR
+# build react-native application
+npx react-native bundle \
+    --platform android \
+    --dev false \
+    --entry-file index.js \
+    --reset-cache \
+    --bundle-output $BUNDLE_PATH \
+    --sourcemap-output $SOURCE_MAP_PATH \
+    --minify false  \
+    --assets-dest ./android/app/src/main/res/
+
+
+# add source map identifier to final javascript bundle
+npx --yes @backtrace/javascript-cli process --path=$BUNDLE_PATH
+
+HBC_OUTPUT="$BUILD_DIR/app.hbc"
+HBC_MAP_OUTPUT="$HBC_OUTPUT.map"
+
+# generate react-native executable
+./node_modules/react-native/sdks/hermesc/osx-bin/hermesc \
+    -emit-binary \
+    -max-diagnostic-width=80  \
+    -output-source-map \
+    -out=$HBC_OUTPUT \
+    $BUNDLE_PATH
+
+# on this stage we have source map for built application via react-native 
+# and source map for the final executable. Combination of both should generate
+# final source map needed to process correctly reports
+node ./node_modules/react-native/scripts/compose-source-maps.js \
+    $SOURCE_MAP_PATH \
+    $HBC_MAP_OUTPUT \
+    -o $SOURCE_MAP_PATH
+
+# upload data to Backtrace
+npx --yes @backtrace/javascript-cli run $BUNDLE_PATH
+
+# prepare android application
+mkdir -p ./android/app/src/main/assets
+# rename hbc to android.bundle file
+mv $HBC_OUTPUT $BUNDLE_PATH
+
+# prepare android application
+mkdir -p ./android/app/build/generated/assets/createBundleReleaseJsAndAssets
+cp $BUNDLE_PATH ./android/app/build/generated/assets/createBundleReleaseJsAndAssets/
+mkdir -p ./android/app/build/intermediates/assets/release/
+cp $BUNDLE_PATH ./android/app/build/intermediates/assets/release/
+
+cd android
+./gradlew assembleRelease 
+echo "Application build is available under path: ./android/app/build/outputs/apk/release/"
@@ -20,7 +20,7 @@ react {
     //   The list of variants to that are debuggable. For those we're going to
     //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
     //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
+    debuggableVariants = ["release"]
 
     /* Bundling */
     //   A list containing the node command and its flags. Default is just 'node'.
 
@@ -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 $@
@@ -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;
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@`
`41`	`41`	`},`
`42`	`42`	`"dependencies": {`
`43`	`43`	`"@reduxjs/toolkit": "^1.9.5",`
`44`		`- "@backtrace/browser": "^0.1.0"`
	`44`	`+ "@backtrace/browser": "^0.2.0",`
	`45`	`+ "@backtrace/session-replay": "^0.0.1"`
`45`	`46`	`}`
`46`	`47`	`}`