feat(core): Automatically annotate React components at build time

packages/bundler-plugin-core/.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     "test/fixtures/**/*",
     "sentry-release-injection-file.js",
     "sentry-esbuild-debugid-injection-file.js",
+    "react-annotate-plugin.js",
   ],
   parserOptions: {
     tsconfigRootDir: __dirname,

packages/bundler-plugin-core/package.json

@@ -52,6 +52,7 @@
     "fix": "eslint ./src ./test --format stylish --fix"
   },
   "dependencies": {
+    "@babel/core": "7.18.5",
     "@sentry/cli": "^2.22.3",
     "@sentry/node": "^7.60.0",
     "@sentry/utils": "^7.60.0",
@@ -62,7 +63,6 @@
     "unplugin": "1.0.1"
   },
   "devDependencies": {
-    "@babel/core": "7.18.5",
     "@babel/preset-env": "7.18.2",
     "@babel/preset-typescript": "7.17.12",
     "@rollup/plugin-babel": "5.3.1",

packages/bundler-plugin-core/src/index.ts

@@ -1,8 +1,9 @@
 import SentryCli from "@sentry/cli";
+import { transformAsync } from "@babel/core";
 import * as fs from "fs";
 import * as path from "path";
 import MagicString from "magic-string";
-import { createUnplugin, UnpluginOptions } from "unplugin";
+import { createUnplugin, TransformResult, UnpluginOptions } from "unplugin";
 import { normalizeUserOptions, validateOptions } from "./options-mapping";
 import { createDebugIdUploadFunction } from "./debug-id-upload";
 import { releaseManagementPlugin } from "./plugins/release-management";
@@ -22,9 +23,16 @@ import {
 } from "./utils";
 import * as dotenv from "dotenv";
 import { glob } from "glob";
+import pkg from "@sentry/utils";
+const { logger } = pkg;
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore Importing the annotate plugin which is not concerned with types
+import { reactAnnotate } from "./plugins/react-annotate-plugin";
 
 interface SentryUnpluginFactoryOptions {
   releaseInjectionPlugin: (injectionCode: string) => UnpluginOptions;
+  reactAnnotatePlugin: () => UnpluginOptions;
   moduleMetadataInjectionPlugin?: (injectionCode: string) => UnpluginOptions;
   debugIdInjectionPlugin: () => UnpluginOptions;
   debugIdUploadPlugin: (upload: (buildArtifacts: string[]) => Promise<void>) => UnpluginOptions;
@@ -60,6 +68,7 @@ interface SentryUnpluginFactoryOptions {
  */
 export function sentryUnpluginFactory({
   releaseInjectionPlugin,
+  reactAnnotatePlugin,
   moduleMetadataInjectionPlugin,
   debugIdInjectionPlugin,
   debugIdUploadPlugin,
@@ -317,6 +326,20 @@ export function sentryUnpluginFactory({
       );
     }
 
+    if (!options.reactAnnotate) {
+      logger.warn(
+        "No options provided for the react annotate plugin. Please set `reactAnnotate.enabled` to `true` if you would like to have your React components automatically annotated at build-time."
+      );
+    } else if (!options.reactAnnotate.enabled) {
+      logger.info(
+        "The react annotate plugin is currently disabled. Skipping react component name annotations."
+      );
+    } else {
+      {
+        plugins.push(reactAnnotatePlugin());
+      }
+    }
+
     return plugins;
   });
 }
@@ -346,7 +369,6 @@ export function sentryCliBinaryExists(): boolean {
 
 export function createRollupReleaseInjectionHooks(injectionCode: string) {
   const virtualReleaseInjectionFileId = "\0sentry-release-injection-file";
-
   return {
     resolveId(id: string) {
       if (id === virtualReleaseInjectionFileId) {
@@ -510,6 +532,58 @@ export function createRollupDebugIdUploadHooks(
   };
 }
 
+export function createReactAnnotateHooks() {
+  return {
+    async transform(this: void, code: string, id: string): Promise<TransformResult> {
+      // id may contain query and hash which will trip up our file extension logic below
+      const idWithoutQueryAndHash = stripQueryAndHashFromPath(id);
+
+      if (idWithoutQueryAndHash.match(/\\node_modules\\|\/node_modules\//)) {
+        return null;
+      }
+
+      // We will only apply this plugin on jsx and tsx files
+      if (![".jsx", ".tsx"].some((ending) => idWithoutQueryAndHash.endsWith(ending))) {
+        return null;
+      }
+
+      const parserPlugins = [];
+      if (idWithoutQueryAndHash.endsWith(".jsx")) {
+        parserPlugins.push("jsx");
+      } else if (idWithoutQueryAndHash.endsWith(".tsx")) {
+        parserPlugins.push("jsx", "typescript");
+      }
+
+      try {
+        const result = await transformAsync(code, {
+          plugins: [[reactAnnotate]],
+          filename: id,
+          parserOpts: {
+            sourceType: "module",
+            allowAwaitOutsideFunction: true,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore This array will always be type compliant when using 'jsx' or 'typescript'
+            plugins: parserPlugins,
+          },
+          generatorOpts: {
+            decoratorsBeforeExport: true,
+          },
+          sourceMaps: true,
+        });
+
+        return {
+          code: result?.code ?? code,
+          map: result?.map,
+        };
+      } catch (e) {
+        logger.error(`Failed to apply react annotate plugin`, e);
+      }
+
+      return { code };
+    },
+  };
+}
+
 export function getDebugIdSnippet(debugId: string): string {
   return `;!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n=(new Error).stack;n&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[n]="${debugId}",e._sentryDebugIdIdentifier="sentry-dbid-${debugId}")}catch(e){}}();`;
 }

packages/bundler-plugin-core/src/options-mapping.ts

@@ -29,6 +29,7 @@ export function normalizeUserOptions(userOptions: UserOptions) {
       cleanArtifacts: userOptions.release?.cleanArtifacts ?? false,
     },
     bundleSizeOptimizations: userOptions.bundleSizeOptimizations,
+    reactAnnotate: userOptions.reactAnnotate,
     _experiments: userOptions._experiments ?? {},
   };