Add collect modules (#2606)

Author: krystofwoldrich

.npmignore

@@ -10,3 +10,4 @@
 !react-native.config.js
 !/ios/**/*
 !/android/**/*
+!scripts/collect-modules.sh

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## Unreleased
+
+### Features
+
+- JS Runtime dependencies are sent in Events ([#2606](https://github.com/getsentry/sentry-react-native/pull/2606))
+  - To collect JS dependencies on iOS add `../node_modules/@sentry/react-native/scripts/collect-modules.sh` at the end of the `Bundle React Native code and images` build phase. The collection only works on Release builds. Android builds have a new step in `sentry.gradle` plugin. More in [the migration documentation](https://docs.sentry.io/platforms/react-native/migration#from-48x-to-49x).
+
 ## 4.9.0
 
 ### Features

android/src/main/java/io/sentry/react/RNSentryModule.java

@@ -4,6 +4,7 @@
 import android.content.Context;
 import android.content.pm.PackageInfo;
 import android.content.pm.PackageManager;
+import android.content.res.AssetManager;
 import android.util.SparseIntArray;
 
 import androidx.core.app.FrameMetricsAggregator;
@@ -19,8 +20,12 @@
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.module.annotations.ReactModule;
 
+import java.io.BufferedInputStream;
 import java.io.File;
+import java.io.FileNotFoundException;
 import java.io.FileOutputStream;
+import java.io.InputStream;
+import java.nio.charset.Charset;
 import java.util.Date;
 import java.util.HashMap;
 import java.util.List;
@@ -51,6 +56,8 @@ public class RNSentryModule extends ReactContextBaseJavaModule {
     public static final String NAME = "RNSentry";
 
     private static final Logger logger = Logger.getLogger("react-native-sentry");
+    private static final String modulesPath = "modules.json";
+    private static final Charset UTF_8 = Charset.forName("UTF-8");
 
     private final PackageInfo packageInfo;
     private FrameMetricsAggregator frameMetricsAggregator = null;
@@ -174,6 +181,25 @@ public void crash() {
         throw new RuntimeException("TEST - Sentry Client Crash (only works in release mode)");
     }
 
+    @ReactMethod
+    public void fetchModules(Promise promise) {
+        final AssetManager assets = this.getReactApplicationContext().getResources().getAssets();
+        try (final InputStream stream =
+                     new BufferedInputStream(assets.open(RNSentryModule.modulesPath))) {
+            int size = stream.available();
+            byte[] buffer = new byte[size];
+            stream.read(buffer);
+            stream.close();
+            String modulesJson = new String(buffer, RNSentryModule.UTF_8);
+            promise.resolve(modulesJson);
+        } catch (FileNotFoundException e) {
+            promise.resolve(null);
+        } catch (Throwable e) {
+            logger.warning("Fetching JS Modules failed.");
+            promise.resolve(null);
+        }
+    }
+
     @ReactMethod
     public void fetchNativeRelease(Promise promise) {
         WritableMap release = Arguments.createMap();

ios/RNSentry.m

@@ -157,6 +157,16 @@ - (void)setEventEnvironmentTag:(SentryEvent *)event
             });
 }
 
+RCT_EXPORT_METHOD(fetchModules:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"modules" ofType:@"json"];
+    NSString* modulesString = [NSString stringWithContentsOfFile:filePath
+                                                  encoding:NSUTF8StringEncoding
+                                                     error:nil];
+    resolve(modulesString);
+}
+
 RCT_EXPORT_METHOD(fetchNativeDeviceContexts:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)
 {

package.json

@@ -11,8 +11,10 @@
   },
   "main": "dist/js/index.js",
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "build:watch": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+    "build": "yarn build:sdk && yarn build:tools",
+    "build:sdk": "tsc -p tsconfig.build.json",
+    "build:sdk:watch": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+    "build:tools": "tsc -p tsconfig.build.tools.json",
     "clean": "rimraf dist coverage",
     "test": "jest",
     "lint": "eslint .",

sample/android/app/build.gradle

@@ -81,6 +81,15 @@ project.ext.react = [
     enableHermes: true,  // clean and rebuild if changing
 ]
 
+project.ext.sentryCli = [
+    collectModulesScript: "../../../dist/js/tools/collectModules.js",
+    modulesPaths: [
+      "node_modules",
+      "../..",
+    ],
+    skipCollectModules: false,
+]
+
 apply from: "../../node_modules/react-native/react.gradle"
 apply from: "../../../sentry.gradle"
 

sample/ios/sample.xcodeproj/project.pbxproj

@@ -384,7 +384,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\nset -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 \\\"../../node_modules/@sentry/cli/bin/sentry-cli react-native xcode $REACT_NATIVE_XCODE\\\"\"\n";
+			shellScript = "export SENTRY_PROPERTIES=sentry.properties\nexport EXTRA_PACKAGER_ARGS=\"--sourcemap-output $DERIVED_FILE_DIR/main.jsbundle.map\"\nset -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 \\\"../../node_modules/@sentry/cli/bin/sentry-cli react-native xcode $REACT_NATIVE_XCODE\\\"\"\n\nexport MODULES_PATHS=\"$PWD/../node_modules,$PWD/../../..\"\n/bin/sh ../../scripts/collect-modules.sh\n";
 		};
 		0E8F2596BF2AF7D4635FC910 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;

sample/metro.config.js

@@ -7,8 +7,6 @@
 
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/exclusionList');
-const resolve = require('metro-resolver/src/resolve');
-
 const parentDir = path.resolve(__dirname, '..');
 
 module.exports = {

scripts/collect-modules.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+
+# Print commands before executing them (useful for troubleshooting)
+set -x
+
+if [[ "$CONFIGURATION" = *Debug* ]]; then
+  echo "Debug build. Modules are not collected."
+  exit 0
+fi
+
+if [[ -z "$CONFIGURATION_BUILD_DIR" ]]; then
+  echo "Missing env CONFIGURATION_BUILD_DIR" 1>&2
+  exit 1
+fi
+
+if [[ -z "$UNLOCALIZED_RESOURCES_FOLDER_PATH" ]]; then
+  echo "Missing env UNLOCALIZED_RESOURCES_FOLDER_PATH" 1>&2
+  exit 1
+fi
+
+if [[ -z "$DERIVED_FILE_DIR" ]]; then
+  echo "Missing env DERIVED_FILE_DIR" 1>&2
+  exit 1
+fi
+
+nodePath="node"
+thisFilePath=$(dirname $0)
+collectModulesScript="$thisFilePath/../dist/js/tools/collectModules.js"
+
+destination="$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH"
+modulesOutput="$destination/modules.json"
+if [[ -z "$SOURCE_MAP_PATH" ]]; then
+  sourceMap="$DERIVED_FILE_DIR/main.jsbundle.map"
+else
+  sourceMap="$SOURCE_MAP_PATH"
+fi
+if [[ -z "$MODULES_PATHS" ]]; then
+  modulesPaths="$PWD/../node_modules"
+else
+  modulesPaths="$MODULES_PATHS"
+fi
+
+$nodePath $collectModulesScript $sourceMap $modulesOutput $modulesPaths

sentry.gradle

@@ -41,6 +41,8 @@ gradle.projectsEvaluated {
         def bundleOutput
         def props = bundleTask.getProperties()
         def reactRoot = props.get("workingDir")
+        def modulesOutput = "$reactRoot/android/app/src/main/assets/modules.json"
+        def modulesTask = null
 
         (shouldCleanUp, bundleOutput, sourcemapOutput) = forceSourceMapOutputFromBundleTask(bundleTask)
 
@@ -60,6 +62,7 @@ gradle.projectsEvaluated {
         def previousCliTask = null
 
         def nameCleanup = "${bundleTask.name}_SentryUploadCleanUp"
+        def nameModulesCleanup = "${bundleTask.name}_SentryCollectModulesCleanUp"
         // Upload the source map several times if necessary: once for each release and versionCode.
         currentVariants.each { key, currentVariant ->
           variant = currentVariant[0]
@@ -79,6 +82,7 @@ gradle.projectsEvaluated {
           // below) and distribution identifier (`--dist` below).  Give the task a unique name
           // based on where we're uploading to.
           def nameCliTask = "${bundleTask.name}_SentryUpload_${releaseName}_${versionCode}"
+          def nameModulesTask = "${bundleTask.name}_SentryCollectModules_${releaseName}_${versionCode}"
 
           // If several outputs have the same releaseName and versionCode, we'd do the exact same
           // upload for each of them.  No need to repeat.
@@ -153,6 +157,34 @@ gradle.projectsEvaluated {
               enabled true
           }
 
+          modulesTask = tasks.create(nameModulesTask, Exec) {
+              description = "collect javascript modules from bundle source map"
+              group = 'sentry.io'
+
+              workingDir reactRoot
+
+              def collectModulesScript = config.containsKey('collectModulesScript')
+                  ? file(config.collectModulesScript).getAbsolutePath()
+                  : "$reactRoot/node_modules/@sentry/react-native/dist/js/tools/collectModules.js"
+              def modulesPaths = config.containsKey('modulesPaths')
+                  ? config.modulesPaths.join(',')
+                  : "$reactRoot/node_modules"
+              def args = ["node",
+                          collectModulesScript,
+                          sourcemapOutput,
+                          modulesOutput,
+                          modulesPaths
+              ]
+
+              project.logger.info("Sentry-CollectModules arguments: ${args}")
+              commandLine(*args)
+
+              def skip = config.containsKey('skipCollectModules')
+                  ? config.skipCollectModules == true
+                  : false
+              enabled !skip
+          }
+
           // chain the upload tasks so they run sequentially in order to run
           // the cliCleanUpTask after the final upload task is run
           if (previousCliTask != null) {
@@ -161,6 +193,20 @@ gradle.projectsEvaluated {
             bundleTask.finalizedBy cliTask
           }
           previousCliTask = cliTask
+          cliTask.finalizedBy modulesTask
+
+          def modulesCleanUpTask = tasks.create(name: nameModulesCleanup, type: Delete) {
+              description = "clean up collected modules generated file"
+              group = 'sentry.io'
+
+              delete modulesOutput
+          }
+
+          def packageTasks = tasks.findAll { task -> "package${variant}".equalsIgnoreCase(task.name) && task.enabled }
+          packageTasks.each { packageTask ->
+              packageTask.dependsOn modulesTask
+              packageTask.finalizedBy modulesCleanUpTask
+          }
         }
 
         /** Delete sourcemap files */
@@ -169,7 +215,8 @@ gradle.projectsEvaluated {
             group = 'sentry.io'
 
             delete sourcemapOutput
-            delete "$buildDir/intermediates/assets/release/index.android.bundle.map" // react native default bundle dir
+            delete "$buildDir/intermediates/assets/release/index.android.bundle.map"
+            // react native default bundle dir
         }
 
         // register clean task extension