feat(sourcemaps): Add Debug Ids support for JSC and Hermes bundles (#3164)

Co-authored-by: Abhijeet Prasad <[email protected]>

Author: krystofwoldrich

.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;