Merge ab136a5 into ac72abc

Author: krystofwoldrich

.gitignore

@@ -74,3 +74,6 @@ yalc.lock
 
 # E2E tests
 test/react-native/versions
+
+# Created by Sentry Metro Plugin
+.sentry/

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",

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'));

samples/react-native/babel.config.js

@@ -1,4 +1,4 @@
-const componentAnnotatePlugin = require('@sentry/babel-plugin-component-annotate');
+//const componentAnnotatePlugin = require('@sentry/babel-plugin-component-annotate');
 
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
@@ -12,6 +12,6 @@ module.exports = {
       },
     ],
     'react-native-reanimated/plugin',
-    componentAnnotatePlugin,
+    //componentAnnotatePlugin,
   ],
 };

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,
+});

samples/react-native/src/Screens/TrackerScreen.tsx

@@ -75,9 +75,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 ? (
           <>
@@ -113,6 +111,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: {

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();
+  }
+}

src/js/tools/metroconfig.ts

@@ -1,24 +1,55 @@
+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 {
+  canUseSentryBabelTransformer,
+  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 +59,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 +72,12 @@ export function getSentryExpoConfig(
     ],
   });
 
-  return withSentryFramesCollapsed(config);
+  let newConfig = withSentryFramesCollapsed(config);
+  if (options.annotateReactComponents) {
+    newConfig = withSentryBabelTransformer(newConfig);
+  }
+
+  return newConfig;
 }
 
 function loadExpoMetroConfigModule(): {
@@ -64,6 +100,32 @@ function loadExpoMetroConfigModule(): {
   }
 }
 
+function withSentryBabelTransformer(config: MetroConfig): MetroConfig {
+  const defaultBabelTransformerPath = config.transformer && config.transformer.babelTransformerPath;
+  logger.debug('Default Babel transformer path from `config.transformer`:', defaultBabelTransformerPath);
+
+  if (!defaultBabelTransformerPath && !canUseSentryBabelTransformer(config.projectRoot)) {
+    // eslint-disable-next-line no-console
+    console.warn('Sentry Babel transformer cannot be used. Not adding it ...');
+    return config;
+  }
+
+  if (defaultBabelTransformerPath) {
+    saveDefaultBabelTransformerPath(config.projectRoot || '.', defaultBabelTransformerPath);
+    process.on('exit', () => {
+      cleanDefaultBabelTransformerPath(config.projectRoot || '.');
+    });
+  }
+
+  return {
+    ...config,
+    transformer: {
+      ...config.transformer,
+      babelTransformerPath: require.resolve('./sentryBabelTransformer'),
+    },
+  };
+}
+
 type MetroCustomSerializer = Required<Required<MetroConfig>['serializer']>['customSerializer'] | undefined;
 
 function withSentryDebugId(config: MetroConfig): MetroConfig {

src/js/tools/sentryBabelTransformer.ts

@@ -0,0 +1,47 @@
+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 {
+  let defaultTransformer: BabelTransformer | undefined;
+
+  // Using spread operator to avoid any conflicts with the default transformer
+  const transform: BabelTransformer['transform'] = (...args) => {
+    const transformerArgs = args[0];
+    const projectRoot = transformerArgs.options.projectRoot;
+
+    if (!defaultTransformer) {
+      defaultTransformer = loadDefaultBabelTransformer(projectRoot);
+    }
+
+    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;

src/js/tools/sentryBabelTransformerUtils.ts

@@ -0,0 +1,107 @@
+import { logger } from '@sentry/utils';
+import * as fs from 'fs';
+import * as path from 'path';
+
+import type { BabelTransformer } from './vendor/metro/metroBabelTransformer';
+
+/**
+ * Saves default Babel transformer path to the project root.
+ */
+export function saveDefaultBabelTransformerPath(projectRoot: string, defaultBabelTransformerPath: string): void {
+  try {
+    fs.mkdirSync(path.join(projectRoot, '.sentry'), { recursive: true });
+    fs.writeFileSync(getDefaultBabelTransformerPath(projectRoot), 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(projectRoot: string): string | undefined {
+  try {
+    if (fs.existsSync(getDefaultBabelTransformerPath(projectRoot))) {
+      return fs.readFileSync(getDefaultBabelTransformerPath(projectRoot)).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(projectRoot: string): void {
+  try {
+    if (fs.existsSync(getDefaultBabelTransformerPath(projectRoot))) {
+      fs.unlinkSync(getDefaultBabelTransformerPath(projectRoot));
+    }
+    logger.debug('Cleaned default Babel transformer path');
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('[Sentry] Failed to clean default Babel transformer path:', e);
+  }
+}
+
+function getDefaultBabelTransformerPath(from: string): string {
+  return path.join(from, '.sentry/.defaultBabelTransformerPath');
+}
+
+/**
+ * Loads default Babel transformer from `@react-native/metro-config` -> `@react-native/metro-babel-transformer`.
+ */
+export function loadDefaultBabelTransformer(projectRoot: string): BabelTransformer {
+  const defaultBabelTransformerPath = readDefaultBabelTransformerPath(projectRoot);
+  if (defaultBabelTransformerPath) {
+    logger.debug(`Loading default Babel transformer from ${defaultBabelTransformerPath}`);
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    return require(defaultBabelTransformerPath);
+  }
+
+  const reactNativeMetroConfigPath = resolveReactNativeMetroConfigPath(projectRoot);
+  if (!reactNativeMetroConfigPath) {
+    throw new Error('Cannot resolve `@react-native/metro-config` to find `@react-native/metro-babel-transformer`.');
+  }
+
+  let defaultTransformerPath: string;
+  try {
+    defaultTransformerPath = require.resolve('@react-native/metro-babel-transformer', {
+      paths: [reactNativeMetroConfigPath],
+    });
+    logger.debug(`Resolved @react-native/metro-babel-transformer to ${defaultTransformerPath}`);
+  } catch (e) {
+    throw new Error('Cannot load `@react-native/metro-babel-transformer` from `${reactNativeMetroConfig}`.');
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const defaultTransformer = require(defaultTransformerPath);
+  return defaultTransformer;
+}
+
+/**
+ * Checks current environment and installed dependencies to determine if Sentry Babel transformer can be used.
+ */
+export function canUseSentryBabelTransformer(projectRoot?: string): boolean {
+  return !!resolveReactNativeMetroConfigPath(projectRoot);
+}
+
+/**
+ * Resolves path to the installed `@react-native/metro-config` package.
+ * Available since React Native 0.72
+ */
+function resolveReactNativeMetroConfigPath(projectRoot?: string): string | undefined {
+  try {
+    const p = require.resolve('@react-native/metro-config', projectRoot ? { paths: [projectRoot] } : undefined);
+    logger.debug(`Resolved @react-native/metro-config to ${p}`);
+    return p;
+  } catch (e) {
+    // return undefined;
+  }
+  logger.debug('Failed to resolve @react-native/metro-config');
+  return undefined;
+}