Add Debug Ids support for JSC and Hermes bundles

.github/workflows/e2e.yml

@@ -263,6 +263,7 @@ jobs:
         run: |
           patch --verbose --strip=0 --force --ignore-whitespace --fuzz 4 < ../../../rn.patch
           ../../../rn.patch.app.js --app .
+          ../../../rn.patch.metro.config.js --path metro.config.js
 
       - name: Patch Android App RN
         if: ${{ matrix.platform == 'android' }}

.npmignore

@@ -13,3 +13,7 @@
 !/android/**/*
 !src/js/NativeRNSentry.ts
 !scripts/collect-modules.sh
+!scripts/copy-debugid.js
+!scripts/has-sourcemap-debugid.js
+!scripts/sentry-xcode.sh
+!scripts/sentry-xcode-debug-files.sh

CHANGELOG.md

@@ -5,6 +5,32 @@
 ### Features
 
 - Add `buildFeatures.buildConfig=true` to support AGP 8 ([#3298](https://github.com/getsentry/sentry-react-native/pull/3298))
+- Add Debug ID support ([#3164](https://github.com/getsentry/sentry-react-native/pull/3164))
+
+  This is optional to use Debug IDs. Your current setup will keep working as is.
+
+  Add Sentry Metro Serializer to `metro.config.js` to generate Debug ID for the application bundle and source map.
+
+  ```javascript
+    const {createSentryMetroSerializer} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');
+    const config = {serializer: createSentryMetroSerializer()};
+  ```
+
+  On iOS update `Bundle React Native Code and Images` and `Upload Debug Symbols to Sentry` build phases.
+
+  ```bash
+    set -e
+    WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
+    REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
+
+    /bin/sh -c "$WITH_ENVIRONMENT \"/bin/sh ../scripts/sentry-xcode.sh $REACT_NATIVE_XCODE\""
+  ```
+
+  ```bash
+    /bin/sh ../../scripts/sentry-xcode-debug-files.sh
+  ```
+
+  More information about the new setup [can be found here](https://docs.sentry.io/platforms/react-native/manual-setup/manual-setup/).
 
 ### Fixes
 

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  collectCoverage: true,
+  preset: 'react-native',
+  setupFilesAfterEnv: ['<rootDir>/test/mockConsole.ts'],
+  globals: {
+    __DEV__: true,
+    'ts-jest': {
+      tsConfig: './tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js'],
+  testPathIgnorePatterns: ['<rootDir>/test/e2e/', '<rootDir>/test/tools/', '<rootDir>/test/react-native/versions'],
+  testEnvironment: 'node',
+  testMatch: ['**/*.test.(ts|tsx)'],
+};

jest.config.tools.js

@@ -0,0 +1,18 @@
+module.exports = {
+  collectCoverage: true,
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['<rootDir>/test/mockConsole.ts'],
+  globals: {
+    __DEV__: true,
+  },
+  testMatch: ['**/test/tools/**/*.ts'],
+  transform: {
+    '^.+\\.(ts|tsx)$': [
+      'ts-jest',
+      {
+        tsconfig: './tsconfig.build.tools.json',
+        diagnostics: false,
+      },
+    ],
+  },
+};

package.json

@@ -24,7 +24,9 @@
     "build:tools": "tsc -p tsconfig.build.tools.json",
     "downlevel": "downlevel-dts dist ts3.8/dist --to=3.8",
     "clean": "rimraf dist coverage",
-    "test": "jest",
+    "test": "yarn test:sdk && yarn test:tools",
+    "test:sdk": "jest",
+    "test:tools": "jest --config jest.config.tools.js",
     "fix": "yarn fix:eslint && yarn fix:prettier",
     "fix:eslint": "eslint --config .eslintrc.js --fix .",
     "fix:prettier": "prettier --write \"{src,test,scripts}/**/**.ts\"",
@@ -72,20 +74,25 @@
     "@sentry/wizard": "3.13.0",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.14",
+    "@types/uglify-js": "^3.17.2",
+    "@types/uuid": "^9.0.4",
     "babel-jest": "^29.6.2",
     "downlevel-dts": "^0.11.0",
     "eslint": "^7.6.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-native": "^3.8.1",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
+    "metro": "0.76",
     "prettier": "^2.0.5",
     "react": "18.2.0",
     "react-native": "0.72.4",
     "replace-in-file": "^7.0.1",
     "rimraf": "^4.1.1",
     "ts-jest": "^29.1.1",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "uglify-js": "^3.17.4",
+    "uuid": "^9.0.1"
   },
   "rnpm": {
     "commands": {},
@@ -95,33 +102,6 @@
     },
     "ios": {}
   },
-  "jest": {
-    "collectCoverage": true,
-    "preset": "react-native",
-    "setupFilesAfterEnv": [
-      "<rootDir>/test/mockConsole.ts"
-    ],
-    "globals": {
-      "__DEV__": true,
-      "ts-jest": {
-        "tsConfig": "./tsconfig.json",
-        "diagnostics": false
-      }
-    },
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
-    "testPathIgnorePatterns": [
-      "<rootDir>/test/e2e/",
-      "<rootDir>/test/react-native/versions"
-    ],
-    "testEnvironment": "node",
-    "testMatch": [
-      "**/*.test.(ts|tsx)"
-    ]
-  },
   "codegenConfig": {
     "name": "RNSentrySpec",
     "type": "modules",

sample-new-architecture/android/app/build.gradle

@@ -74,6 +74,8 @@ project.ext.sentryCli = [
       "../..",
     ],
     skipCollectModules: false,
+    copyDebugIdScript: "../../../scripts/copy-debugid.js",
+    hasSourceMapDebugIdScript: "../../../scripts/has-sourcemap-debugid.js",
 ]
 
 apply from: "../../../sentry.gradle"

sample-new-architecture/android/gradle.properties

@@ -11,6 +11,7 @@
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
 org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+org.gradle.logging.level=lifecycle
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit

sample-new-architecture/ios/.xcode.env

@@ -9,3 +9,11 @@
 # For example, to use nvm with brew, add the following line
 #. "$(brew --prefix nvm)/nvm.sh" --no-use
 export NODE_BINARY=$(command -v node)
+
+export EXTRA_COMPILER_ARGS="-w"
+
+export SENTRY_CLI_EXECUTABLE="../../node_modules/@sentry/cli/bin/sentry-cli"
+export SENTRY_CLI_EXTRA_ARGS="--force-foreground"
+export SENTRY_CLI_DEBUG_FILES_UPLOAD_EXTRA_ARGS=""
+export SENTRY_CLI_RN_XCODE_EXTRA_ARGS=""
+export MODULES_PATHS="$PWD/../node_modules,$PWD/../../.."

sample-new-architecture/ios/sampleNewArchitecture.xcodeproj/project.pbxproj

@@ -271,7 +271,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "set -e\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\n\nexport SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\n\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\nSENTRY_CLI=\"../../node_modules/@sentry/cli/bin/sentry-cli\"\nBUNDLE_REACT_NATIVE=\"$SENTRY_CLI react-native xcode --force-foreground $REACT_NATIVE_XCODE\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT \\\"$BUNDLE_REACT_NATIVE\\\"\"\n\nexport MODULES_PATHS=\"$PWD/../node_modules,$PWD/../../..\"\nCOLLECT_MODULES=\"../../scripts/collect-modules.sh\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT \\\"$COLLECT_MODULES\\\"\"\n";
+			shellScript = "set -e\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"../node_modules/react-native/scripts/react-native-xcode.sh\"\nBUNDLE_REACT_NATIVE=\"/bin/sh ../../scripts/sentry-xcode.sh $REACT_NATIVE_XCODE\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT \\\"$BUNDLE_REACT_NATIVE\\\"\"\n";
 		};
 		00EEFC60759A1932668264C0 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -303,7 +303,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "set -e\nWITH_ENVIRONMENT=\"../node_modules/react-native/scripts/xcode/with-environment.sh\"\n\nexport SENTRY_PROPERTIES=sentry.properties\n\n[[ $SENTRY_INCLUDE_NATIVE_SOURCES == \"true\" ]] && INCLUDE_SOURCES_FLAG=\"--include-sources\" || INCLUDE_SOURCES_FLAG=\"\"\nSENTRY_CLI=\"../../node_modules/@sentry/cli/bin/sentry-cli\"\nFLAGS=\"--force-foreground $INCLUDE_SOURCES_FLAG\"\n\n/bin/sh -c \"$WITH_ENVIRONMENT \\\"$UPLOAD_DEBUG_FILES\\\"\"\n";
+			shellScript = "/bin/sh ../../scripts/sentry-xcode-debug-files.sh\n";
 		};
 		A55EABD7B0C7F3A422A6CC61 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;

sample-new-architecture/metro.config.js

@@ -2,6 +2,9 @@ const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/exclusionList');
 
+const {
+  createSentryMetroSerializer,
+} = require('../dist/js/tools/sentryMetroSerializer');
 const parentDir = path.resolve(__dirname, '..');
 
 /**
@@ -41,6 +44,10 @@ const config = {
       },
     ),
   },
+  serializer: {
+    customSerializer: createSentryMetroSerializer(),
+  },
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+const m = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = m;

scripts/copy-debugid.js

@@ -0,0 +1,52 @@
+const process = require('process');
+const fs = require('fs');
+
+console.log('Copy `debugId` from packager source map to Hermes source map...');
+
+const packagerSourceMapPath = process.argv[2];
+const hermesSourceMapPath = process.argv[3];
+
+if (!packagerSourceMapPath) {
+  console.log('Please provide packager source map path (A path to copy `debugId` from).');
+  process.exit(0);
+}
+if (!hermesSourceMapPath) {
+  console.log('Please provide Hermes source map path. ((A path to copy `debugId` to))');
+  process.exit(0);
+}
+if (!fs.existsSync(packagerSourceMapPath)) {
+  console.log('Packager source map path (A path to copy `debugId` from).');
+  process.exit(0);
+}
+if (!fs.existsSync(hermesSourceMapPath)) {
+  console.log('Hermes source map not found. ((A path to copy `debugId` to))');
+  process.exit(0);
+}
+
+const from = fs.readFileSync(process.argv[2], 'utf8');
+const to = fs.readFileSync(process.argv[3], 'utf8');
+
+const fromParsed = JSON.parse(from);
+const toParsed = JSON.parse(to);
+
+if (!fromParsed.debugId && !fromParsed.debug_id) {
+  console.log('Packager source map does not have `debugId`.');
+  process.exit(0);
+}
+
+if (toParsed.debugId || toParsed.debug_id) {
+  console.log('Hermes combined source map already has `debugId`.');
+  process.exit(0);
+}
+
+if (fromParsed.debugId) {
+  toParsed.debugId = fromParsed.debugId;
+  toParsed.debug_id = fromParsed.debugId;
+} else if (fromParsed.debug_id) {
+  toParsed.debugId = fromParsed.debug_id;
+  toParsed.debug_id = fromParsed.debug_id;
+}
+
+fs.writeFileSync(process.argv[3], JSON.stringify(toParsed));
+
+console.log('Done.');

scripts/has-sourcemap-debugid.js

@@ -0,0 +1,31 @@
+const process = require('process');
+const fs = require('fs');
+
+const sourceMapPath = process.argv[2];
+
+if (!sourceMapPath) {
+  console.log('Add source map path as first argument of the script.');
+  process.exit(1);
+}
+
+if (!fs.existsSync(sourceMapPath)) {
+  console.log(`${sourceMapPath} does not exist.`);
+  process.exit(1);
+}
+
+let sourceMap;
+try {
+  sourceMap = JSON.parse(fs.readFileSync(sourceMapPath, 'utf8'));
+} catch (e) {
+  console.log(`Sourcemap at ${sourceMapPath} was unable to be read.`, e);
+  process.exist(1);
+}
+
+if (typeof sourceMap.debugId === 'string' && sourceMap.debugId.length > 0) {
+  console.log(sourceMap.debugId);
+} else if (typeof sourceMap.debug_id === 'string' && sourceMap.debug_id.length > 0) {
+  console.log(sourceMap.debug_id);
+} else {
+  console.log(`${sourceMapPath} does not contain 'debugId' nor 'debug_id'.`);
+  process.exist(1);
+}

scripts/sentry-debugid-injection-snippet.js

@@ -0,0 +1,18 @@
+// This is non minified version the debug id injection snippet used in the Metro plugin.
+var _sentryDebugIds = {};
+var _sentryDebugIdIdentifier = '';
+
+if (typeof _sentryDebugIds === 'undefined') {
+  _sentryDebugIds = {};
+}
+
+try {
+  var stack = new Error().stack;
+  if (stack) {
+    _sentryDebugIds[stack] = '__SENTRY_DEBUG_ID__';
+    // eslint-disable-next-line no-unused-vars
+    _sentryDebugIdIdentifier = 'sentry-dbid-__SENTRY_DEBUG_ID__';
+  }
+} catch (e) {
+  /**/
+}

scripts/sentry-xcode-debug-files.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+# Upload Debug Symbols to Sentry Xcode Build Phase
+# PWD=ios
+
+# print commands before executing them and stop on first error
+set -x -e
+
+# load envs if loader file exists (since rn 0.68)
+WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
+if [ -f "$WITH_ENVIRONMENT" ]; then
+    . "$WITH_ENVIRONMENT"
+fi
+
+[ -z "$SENTRY_PROPERTIES" ] && export SENTRY_PROPERTIES=sentry.properties
+[ -z "$SENTRY_CLI_EXECUTABLE" ] && SENTRY_CLI_EXECUTABLE="../node_modules/@sentry/cli/bin/sentry-cli"
+
+[[ $SENTRY_INCLUDE_NATIVE_SOURCES == "true" ]] && INCLUDE_SOURCES_FLAG="--include-sources" || INCLUDE_SOURCES_FLAG=""
+
+EXTRA_ARGS="$SENTRY_CLI_EXTRA_ARGS $SENTRY_CLI_DEBUG_FILES_UPLOAD_EXTRA_ARGS $INCLUDE_SOURCES_FLAG"
+
+UPLOAD_DEBUG_FILES="\"$SENTRY_CLI_EXECUTABLE\" debug-files upload $EXTRA_ARGS \"$DWARF_DSYM_FOLDER_PATH\""
+/bin/sh -c "$UPLOAD_DEBUG_FILES"

scripts/sentry-xcode.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+# Sentry Bundle React Native code and images
+# PWD=ios
+
+# print commands before executing them and stop on first error
+set -x -e
+
+# WITH_ENVIRONMENT is executed by React Native
+
+[ -z "$SENTRY_PROPERTIES" ] && export SENTRY_PROPERTIES=sentry.properties
+[ -z "$SOURCEMAP_FILE" ] && export SOURCEMAP_FILE="$DERIVED_FILE_DIR/main.jsbundle.map"
+[ -z "$SENTRY_CLI_EXECUTABLE" ] && SENTRY_CLI_EXECUTABLE="../node_modules/@sentry/cli/bin/sentry-cli"
+
+REACT_NATIVE_XCODE=$1
+
+[[ "$AUTO_RELEASE" != true ]] && [[ -z "$BUNDLE_COMMAND" || "$BUNDLE_COMMAND" != "ram-bundle" ]] && NO_AUTO_RELEASE="--no-auto-release"
+ARGS="$NO_AUTO_RELEASE $SENTRY_CLI_EXTRA_ARGS $SENTRY_CLI_RN_XCODE_EXTRA_ARGS"
+
+BUNDLE_REACT_NATIVE="\"$SENTRY_CLI_EXECUTABLE\" react-native xcode $ARGS \"$REACT_NATIVE_XCODE\""
+
+/bin/sh -c "$BUNDLE_REACT_NATIVE"
+
+[ -z "$SENTRY_COLLECT_MODULES" ] && SENTRY_COLLECT_MODULES="../../scripts/collect-modules.sh"
+
+if [ -f "$SENTRY_COLLECT_MODULES" ]; then
+  /bin/sh "$SENTRY_COLLECT_MODULES"
+fi