feat: Add Sentry Babel Transformer (#3916)

krystofwoldrich · web-flow · commit 6067ecc3eb70 · 2024-07-03T17:49:41.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -74,3 +74,6 @@ yalc.lock
 
 # E2E tests
 test/react-native/versions
+
+# Created by Sentry Metro Plugin
+.sentry/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # Changelog
 
+## Unreleased
+
+### Features
+
+- Add `annotateReactComponents` option to `@sentry/react-native/metro` ([#3916](https://github.com/getsentry/sentry-react-native/pull/3916))
+
+  ```js
+  // For Expo
+  const { getSentryExpoConfig } = require("@sentry/react-native/metro");
+  const config = getSentryExpoConfig(__dirname, { annotateReactComponents: true });
+
+  // For RN
+  const { getDefaultConfig } = require('@react-native/metro-config');
+  const { withSentryConfig } = require('@sentry/react-native/metro');
+  module.exports = withSentryConfig(getDefaultConfig(__dirname), { annotateReactComponents: true });
+  ```
+
 ## 5.25.0-alpha.2
 
 ### Features
@@ -483,7 +500,7 @@ see [the Expo guide](https://docs.sentry.io/platforms/react-native/manual-setup/
   const { getSentryExpoConfig } = require("@sentry/react-native/metro");
 
   // const config = getDefaultConfig(__dirname);
-  const config = getSentryExpoConfig(config, {});
+  const config = getSentryExpoConfig(__dirname);
   ```
 
 - New `npx sentry-expo-upload-sourcemaps` for simple EAS Update (`npx expo export`) source maps upload ([#3491](https://github.com/getsentry/sentry-react-native/pull/3491), [#3510](https://github.com/getsentry/sentry-react-native/pull/3510), [#3515](https://github.com/getsentry/sentry-react-native/pull/3515), [#3507](https://github.com/getsentry/sentry-react-native/pull/3507))
diff --git a/package.json b/package.json
@@ -67,6 +67,7 @@
     "react-native": ">=0.65.0"
   },
   "dependencies": {
+    "@sentry/babel-plugin-component-annotate": "2.20.1",
     "@sentry/browser": "7.117.0",
     "@sentry/cli": "2.31.2",
     "@sentry/core": "7.117.0",
diff --git a/samples/expo/app/_layout.tsx b/samples/expo/app/_layout.tsx
@@ -9,12 +9,15 @@ import { HttpClient } from '@sentry/integrations';
 import { SENTRY_INTERNAL_DSN } from '../utils/dsn';
 import * as Sentry from '@sentry/react-native';
 import { isExpoGo } from '../utils/isExpoGo';
+import { LogBox } from 'react-native';
 
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary,
 } from 'expo-router';
 
+LogBox.ignoreAllLogs();
+
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
diff --git a/samples/expo/babel.config.js b/samples/expo/babel.config.js
@@ -1,5 +1,3 @@
-const componentAnnotatePlugin = require('@sentry/babel-plugin-component-annotate');
-
 module.exports = function (api) {
   api.cache(false);
   return {
@@ -13,7 +11,6 @@ module.exports = function (api) {
           },
         },
       ],
-      componentAnnotatePlugin,
     ],
   };
 };
diff --git a/samples/expo/metro.config.js b/samples/expo/metro.config.js
@@ -9,6 +9,7 @@ const config = getSentryExpoConfig(__dirname, {
   // [Web-only]: Enables CSS support in Metro.
   isCSSEnabled: true,
   getDefaultConfig,
+  annotateReactComponents: true,
 });
 
 config.watchFolders.push(path.resolve(__dirname, '../../node_modules/@sentry'));
diff --git a/samples/react-native/babel.config.js b/samples/react-native/babel.config.js
@@ -1,5 +1,3 @@
-const componentAnnotatePlugin = require('@sentry/babel-plugin-component-annotate');
-
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [
@@ -12,6 +10,5 @@ module.exports = {
       },
     ],
     'react-native-reanimated/plugin',
-    componentAnnotatePlugin,
   ],
 };
diff --git a/samples/react-native/metro.config.js b/samples/react-native/metro.config.js
@@ -60,4 +60,6 @@ const config = {
 };
 
 const m = mergeConfig(getDefaultConfig(__dirname), config);
-module.exports = withSentryConfig(m);
+module.exports = withSentryConfig(m, {
+  annotateReactComponents: true,
+});
diff --git a/samples/react-native/src/Screens/TrackerScreen.tsx b/samples/react-native/src/Screens/TrackerScreen.tsx
@@ -73,9 +73,7 @@ const TrackerScreen = () => {
   return (
     <View style={styles.screen}>
       <Sentry.TimeToInitialDisplay record />
-      <View style={styles.titleContainer}>
-        <Text style={styles.title}>Global COVID19 Cases</Text>
-      </View>
+      <TrackerTitle />
       <View style={styles.card}>
         {cases ? (
           <>
@@ -111,6 +109,12 @@ const TrackerScreen = () => {
   );
 };
 
+const TrackerTitle = () => (
+  <View style={styles.titleContainer}>
+    <Text style={styles.title}>Global COVID19 Cases</Text>
+  </View>
+);
+
 export default Sentry.withProfiler(TrackerScreen);
 
 const Statistic = (props: {
diff --git a/src/js/tools/enableLogger.ts b/src/js/tools/enableLogger.ts
@@ -0,0 +1,10 @@
+import { logger } from '@sentry/utils';
+
+/**
+ * Enables debug logger when SENTRY_LOG_LEVEL=debug.
+ */
+export function enableLogger(): void {
+  if (process.env.SENTRY_LOG_LEVEL === 'debug') {
+    logger.enable();
+  }
+}
diff --git a/src/js/tools/metroconfig.ts b/src/js/tools/metroconfig.ts
@@ -1,24 +1,51 @@
+import { logger } from '@sentry/utils';
 import type { MetroConfig, MixedOutput, Module, ReadOnlyGraph } from 'metro';
+import * as process from 'process';
 import { env } from 'process';
 
+import { enableLogger } from './enableLogger';
+import { cleanDefaultBabelTransformerPath, saveDefaultBabelTransformerPath } from './sentryBabelTransformerUtils';
 import { createSentryMetroSerializer, unstable_beforeAssetSerializationPlugin } from './sentryMetroSerializer';
 import type { DefaultConfigOptions } from './vendor/expo/expoconfig';
 
 export * from './sentryMetroSerializer';
 
+enableLogger();
+
+export interface SentryMetroConfigOptions {
+  /**
+   * Annotates React components with Sentry data.
+   * @default false
+   */
+  annotateReactComponents?: boolean;
+}
+
+export interface SentryExpoConfigOptions {
+  /**
+   * Pass a custom `getDefaultConfig` function to override the default Expo configuration getter.
+   */
+  getDefaultConfig?: typeof getSentryExpoConfig;
+}
+
 /**
  * Adds Sentry to the Metro config.
  *
  * Adds Debug ID to the output bundle and source maps.
  * Collapses Sentry frames from the stack trace view in LogBox.
  */
-export function withSentryConfig(config: MetroConfig): MetroConfig {
+export function withSentryConfig(
+  config: MetroConfig,
+  { annotateReactComponents = false }: SentryMetroConfigOptions = {},
+): MetroConfig {
   setSentryMetroDevServerEnvFlag();
 
   let newConfig = config;
 
   newConfig = withSentryDebugId(newConfig);
   newConfig = withSentryFramesCollapsed(newConfig);
+  if (annotateReactComponents) {
+    newConfig = withSentryBabelTransformer(newConfig);
+  }
 
   return newConfig;
 }
@@ -28,7 +55,7 @@ export function withSentryConfig(config: MetroConfig): MetroConfig {
  */
 export function getSentryExpoConfig(
   projectRoot: string,
-  options: DefaultConfigOptions & { getDefaultConfig?: typeof getSentryExpoConfig } = {},
+  options: DefaultConfigOptions & SentryExpoConfigOptions & SentryMetroConfigOptions = {},
 ): MetroConfig {
   setSentryMetroDevServerEnvFlag();
 
@@ -41,7 +68,12 @@ export function getSentryExpoConfig(
     ],
   });
 
-  return withSentryFramesCollapsed(config);
+  let newConfig = withSentryFramesCollapsed(config);
+  if (options.annotateReactComponents) {
+    newConfig = withSentryBabelTransformer(newConfig);
+  }
+
+  return newConfig;
 }
 
 function loadExpoMetroConfigModule(): {
@@ -64,6 +96,38 @@ function loadExpoMetroConfigModule(): {
   }
 }
 
+/**
+ * Adds Sentry Babel transformer to the Metro config.
+ */
+export function withSentryBabelTransformer(config: MetroConfig): MetroConfig {
+  const defaultBabelTransformerPath = config.transformer && config.transformer.babelTransformerPath;
+  logger.debug('Default Babel transformer path from `config.transformer`:', defaultBabelTransformerPath);
+
+  if (!defaultBabelTransformerPath) {
+    // This has to be console.warn because the options is enabled but won't be used
+    // eslint-disable-next-line no-console
+    console.warn('`transformer.babelTransformerPath` is undefined.');
+    // eslint-disable-next-line no-console
+    console.warn('Sentry Babel transformer cannot be used. Not adding it...');
+    return config;
+  }
+
+  if (defaultBabelTransformerPath) {
+    saveDefaultBabelTransformerPath(defaultBabelTransformerPath);
+    process.on('exit', () => {
+      cleanDefaultBabelTransformerPath();
+    });
+  }
+
+  return {
+    ...config,
+    transformer: {
+      ...config.transformer,
+      babelTransformerPath: require.resolve('./sentryBabelTransformer'),
+    },
+  };
+}
+
 type MetroCustomSerializer = Required<Required<MetroConfig>['serializer']>['customSerializer'] | undefined;
 
 function withSentryDebugId(config: MetroConfig): MetroConfig {
diff --git a/src/js/tools/sentryBabelTransformer.ts b/src/js/tools/sentryBabelTransformer.ts
@@ -0,0 +1,43 @@
+import componentAnnotatePlugin from '@sentry/babel-plugin-component-annotate';
+
+import { enableLogger } from './enableLogger';
+import { loadDefaultBabelTransformer } from './sentryBabelTransformerUtils';
+import type { BabelTransformer, BabelTransformerArgs } from './vendor/metro/metroBabelTransformer';
+
+enableLogger();
+
+/**
+ * Creates a Babel transformer with Sentry component annotation plugin.
+ */
+function createSentryBabelTransformer(): BabelTransformer {
+  const defaultTransformer = loadDefaultBabelTransformer();
+
+  // Using spread operator to avoid any conflicts with the default transformer
+  const transform: BabelTransformer['transform'] = (...args) => {
+    const transformerArgs = args[0];
+
+    addSentryComponentAnnotatePlugin(transformerArgs);
+
+    return defaultTransformer.transform(...args);
+  };
+
+  return {
+    ...defaultTransformer,
+    transform,
+  };
+}
+
+function addSentryComponentAnnotatePlugin(args: BabelTransformerArgs | undefined): void {
+  if (!args || typeof args.filename !== 'string' || !Array.isArray(args.plugins)) {
+    return undefined;
+  }
+
+  if (!args.filename.includes('node_modules')) {
+    args.plugins.push(componentAnnotatePlugin);
+  }
+}
+
+const sentryBabelTransformer = createSentryBabelTransformer();
+// With TS set to `commonjs` this will be translated to `module.exports = sentryBabelTransformer;`
+// which will be correctly picked up by Metro
+export = sentryBabelTransformer;
diff --git a/src/js/tools/sentryBabelTransformerUtils.ts b/src/js/tools/sentryBabelTransformerUtils.ts
@@ -0,0 +1,65 @@
+import { logger } from '@sentry/utils';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as process from 'process';
+
+import type { BabelTransformer } from './vendor/metro/metroBabelTransformer';
+
+/**
+ * Saves default Babel transformer path to the project root.
+ */
+export function saveDefaultBabelTransformerPath(defaultBabelTransformerPath: string): void {
+  try {
+    fs.mkdirSync(path.join(process.cwd(), '.sentry'), { recursive: true });
+    fs.writeFileSync(getDefaultBabelTransformerPath(), defaultBabelTransformerPath);
+    logger.debug('Saved default Babel transformer path');
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('[Sentry] Failed to save default Babel transformer path:', e);
+  }
+}
+
+/**
+ * Reads default Babel transformer path from the project root.
+ */
+export function readDefaultBabelTransformerPath(): string | undefined {
+  try {
+    return fs.readFileSync(getDefaultBabelTransformerPath()).toString();
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('[Sentry] Failed to read default Babel transformer path:', e);
+  }
+  return undefined;
+}
+
+/**
+ * Cleans default Babel transformer path from the project root.
+ */
+export function cleanDefaultBabelTransformerPath(): void {
+  try {
+    fs.unlinkSync(getDefaultBabelTransformerPath());
+    logger.debug('Cleaned default Babel transformer path');
+  } catch (e) {
+    // We don't want to fail the build if we can't clean the file
+    // eslint-disable-next-line no-console
+    console.error('[Sentry] Failed to clean default Babel transformer path:', e);
+  }
+}
+
+function getDefaultBabelTransformerPath(): string {
+  return path.join(process.cwd(), '.sentry/.defaultBabelTransformerPath');
+}
+
+/**
+ * Loads default Babel transformer from `@react-native/metro-config` -> `@react-native/metro-babel-transformer`.
+ */
+export function loadDefaultBabelTransformer(): BabelTransformer {
+  const defaultBabelTransformerPath = readDefaultBabelTransformerPath();
+  if (!defaultBabelTransformerPath) {
+    throw new Error('Default Babel Transformer Path not found in `.sentry` directory.');
+  }
+
+  logger.debug(`Loading default Babel transformer from ${defaultBabelTransformerPath}`);
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  return require(defaultBabelTransformerPath);
+}
diff --git a/src/js/tools/vendor/metro/metroBabelTransformer.ts b/src/js/tools/vendor/metro/metroBabelTransformer.ts
diff --git a/test/react-native/rn.patch.metro.config.js b/test/react-native/rn.patch.metro.config.js
diff --git a/test/tools/fixtures/mockBabelTransformer.js b/test/tools/fixtures/mockBabelTransformer.js
diff --git a/test/tools/metroconfig.test.ts b/test/tools/metroconfig.test.ts
diff --git a/test/tools/sentryBabelTransformer.test.ts b/test/tools/sentryBabelTransformer.test.ts
diff --git a/yarn.lock b/yarn.lock
