perf(bundler-plugins): Use fast component annotation for Webpack and Turbopack (#24448)

Stacked on #24440. Webpack and the Next.js Turbopack loader still
annotated React components with Babel. This PR moves them to the fast
oxc-based path, so every bundler integration now uses it. Babel stays as
the fallback when `oxc-parser` cannot load or cannot parse a file. The
next PR in the stack removes that fallback.

`createComponentNameAnnotateHooks` now tries the fast path first and
uses Babel only when the fast path does not handle the file. Webpack,
the Rollup and Vite plugins, and the Turbopack loader already call this
function, so the Rollup plugin no longer needs its own fast-path setup.

The fast path's source maps listed each annotated file by its base name
only, which dropped the directory. That is the bug from #23561, which
was fixed for the Babel path, and it would have come back for Webpack.
The maps now keep the full path, so Rollup and Vite builds that use the
fast path get full paths too.

Ref #24415

Author: timfish

packages/bundler-plugins/src/core/component-annotation-oxc.ts

@@ -149,8 +149,9 @@ async function annotateWithOxcParser(
 
   return {
     code: magicString.toString(),
+    // No `file`, because magic-string would then make `source` relative to it
+    // and drop the directory from `sources`.
     map: magicString.generateMap?.({
-      file: id,
       source: idWithoutQueryAndHash,
       includeContent: true,
       hires: true,

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

@@ -3,6 +3,19 @@ import { CodeInjection, containsOnlyImports, stripQueryAndHashFromPath } from '.
 import type { transformAsync as babelTransformAsync } from '@babel/core';
 import type componentNameAnnotatePlugin from '../babel-plugin';
 import type { experimentalComponentNameAnnotatePlugin } from '../babel-plugin';
+import type {
+  ComponentAnnotationTransformMeta,
+  ComponentAnnotationTransformResult,
+  ParseAstAsync,
+} from './component-annotation-oxc-ast';
+
+type FastAnnotationHooks = {
+  transform(
+    code: string,
+    id: string,
+    meta?: ComponentAnnotationTransformMeta,
+  ): Promise<ComponentAnnotationTransformResult>;
+};
 
 type BabelTransformAsync = typeof babelTransformAsync;
 type BabelParserPlugins = NonNullable<NonNullable<Parameters<BabelTransformAsync>[1]>['parserOpts']>['plugins'];
@@ -71,59 +84,86 @@ export { globFiles } from './glob';
 export { getCodeInjectionPosition } from './get-code-injection-position';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function createComponentNameAnnotateHooks(ignoredComponents: string[], injectIntoHtml: boolean) {
-  return {
-    async transform(this: void, code: string, id: string) {
-      // id may contain query and hash which will trip up our file extension logic below
-      const idWithoutQueryAndHash = stripQueryAndHashFromPath(id);
+export function createComponentNameAnnotateHooks(
+  ignoredComponents: string[],
+  injectIntoHtml: boolean,
+  getParseAstAsync?: () => Promise<ParseAstAsync | null>,
+) {
+  let fastHooksPromise: Promise<FastAnnotationHooks> | undefined;
 
-      if (idWithoutQueryAndHash.match(/\\node_modules\\|\/node_modules\//)) {
-        return null;
+  return {
+    async transform(this: void, code: string, id: string, meta?: ComponentAnnotationTransformMeta) {
+      if (!fastHooksPromise) {
+        fastHooksPromise = import('./component-annotation-oxc').then(
+          ({ createOxcComponentNameAnnotateHooks, getOxcParseAstAsync }) =>
+            createOxcComponentNameAnnotateHooks(
+              ignoredComponents,
+              getParseAstAsync ?? getOxcParseAstAsync,
+              injectIntoHtml,
+            ),
+        );
       }
 
-      // We will only apply this plugin on jsx and tsx files
-      if (!['.jsx', '.tsx'].some(ending => idWithoutQueryAndHash.endsWith(ending))) {
-        return null;
+      const fastResult = await (await fastHooksPromise).transform(code, id, meta);
+      if (fastResult !== undefined) {
+        return fastResult;
       }
 
-      const parserPlugins: BabelParserPlugins = [];
-      if (idWithoutQueryAndHash.endsWith('.jsx')) {
-        parserPlugins.push('jsx');
-      } else if (idWithoutQueryAndHash.endsWith('.tsx')) {
-        parserPlugins.push('jsx', 'typescript');
-      }
+      return transformWithBabel(code, id, ignoredComponents, injectIntoHtml);
+    },
+  };
+}
 
-      const { transformAsync, componentNameAnnotatePlugin, experimentalComponentNameAnnotatePlugin } =
-        await loadBabelAnnotationRuntime();
-      const plugin = injectIntoHtml ? experimentalComponentNameAnnotatePlugin : componentNameAnnotatePlugin;
-
-      try {
-        const result = await transformAsync(code, {
-          plugins: [[plugin, { ignoredComponents }]],
-          filename: id,
-          sourceFileName: idWithoutQueryAndHash,
-          parserOpts: {
-            sourceType: 'module',
-            allowAwaitOutsideFunction: true,
-            plugins: parserPlugins,
-          },
-          generatorOpts: {
-            decoratorsBeforeExport: true,
-          },
-          sourceMaps: true,
-        });
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+async function transformWithBabel(code: string, id: string, ignoredComponents: string[], injectIntoHtml: boolean) {
+  // id may contain query and hash which will trip up our file extension logic below
+  const idWithoutQueryAndHash = stripQueryAndHashFromPath(id);
 
-        return {
-          code: result?.code ?? code,
-          map: result?.map,
-        };
-      } catch (e) {
-        debug.error(`Failed to apply react annotate plugin`, e);
-      }
+  if (idWithoutQueryAndHash.match(/\\node_modules\\|\/node_modules\//)) {
+    return null;
+  }
 
-      return { code };
-    },
-  };
+  // We will only apply this plugin on jsx and tsx files
+  if (!['.jsx', '.tsx'].some(ending => idWithoutQueryAndHash.endsWith(ending))) {
+    return null;
+  }
+
+  const parserPlugins: BabelParserPlugins = [];
+  if (idWithoutQueryAndHash.endsWith('.jsx')) {
+    parserPlugins.push('jsx');
+  } else if (idWithoutQueryAndHash.endsWith('.tsx')) {
+    parserPlugins.push('jsx', 'typescript');
+  }
+
+  const { transformAsync, componentNameAnnotatePlugin, experimentalComponentNameAnnotatePlugin } =
+    await loadBabelAnnotationRuntime();
+  const plugin = injectIntoHtml ? experimentalComponentNameAnnotatePlugin : componentNameAnnotatePlugin;
+
+  try {
+    const result = await transformAsync(code, {
+      plugins: [[plugin, { ignoredComponents }]],
+      filename: id,
+      sourceFileName: idWithoutQueryAndHash,
+      parserOpts: {
+        sourceType: 'module',
+        allowAwaitOutsideFunction: true,
+        plugins: parserPlugins,
+      },
+      generatorOpts: {
+        decoratorsBeforeExport: true,
+      },
+      sourceMaps: true,
+    });
+
+    return {
+      code: result?.code ?? code,
+      map: result?.map,
+    };
+  } catch (e) {
+    debug.error(`Failed to apply react annotate plugin`, e);
+  }
+
+  return { code };
 }
 
 export function getDebugIdSnippet(debugId: string): CodeInjection {

packages/bundler-plugins/src/rollup/index.ts

@@ -15,10 +15,7 @@ import {
   stampDebugId,
   getCodeInjectionPosition,
 } from '../core';
-import type {
-  ComponentAnnotationTransformMeta,
-  ComponentAnnotationTransformResult,
-} from '../core/component-annotation-oxc';
+import type { ComponentAnnotationTransformMeta } from '../core/component-annotation-oxc';
 import type { SourceMap } from 'magic-string';
 import MagicString from 'magic-string';
 import * as path from 'node:path';
@@ -41,13 +38,6 @@ type ViteModule = {
 };
 
 type ViteParseAstAsync = NonNullable<ViteModule['parseAstAsync']>;
-type FastAnnotationHooks = {
-  transform(
-    code: string,
-    id: string,
-    meta?: ComponentAnnotationTransformMeta,
-  ): Promise<ComponentAnnotationTransformResult>;
-};
 
 let viteParseAstAsyncPromise: Promise<ViteParseAstAsync | null> | undefined;
 
@@ -166,31 +156,10 @@ export function _rollupPluginInternal(
     ? createComponentNameAnnotateHooks(
         options.reactComponentAnnotation?.ignoredComponents || [],
         !!options.reactComponentAnnotation?._experimentalInjectIntoHtml,
+        // Vite 8 already loads an oxc-based parser, so reuse it.
+        buildTool === 'vite' && buildToolMajorVersion === '8' ? getViteParseAstAsync : undefined,
       )
     : undefined;
-  const transformFastAnnotations = options.reactComponentAnnotation?.enabled
-    ? (() => {
-        let fastAnnotationHooksPromise: Promise<FastAnnotationHooks> | undefined;
-
-        return {
-          transform(code: string, id: string, meta?: ComponentAnnotationTransformMeta) {
-            if (!fastAnnotationHooksPromise) {
-              fastAnnotationHooksPromise = import('../core/component-annotation-oxc').then(
-                ({ createOxcComponentNameAnnotateHooks, getOxcParseAstAsync }) =>
-                  createOxcComponentNameAnnotateHooks(
-                    options.reactComponentAnnotation?.ignoredComponents || [],
-                    // Vite 8 already loads an oxc-based parser, so reuse it.
-                    buildTool === 'vite' && buildToolMajorVersion === '8' ? getViteParseAstAsync : getOxcParseAstAsync,
-                    !!options.reactComponentAnnotation?._experimentalInjectIntoHtml,
-                  ),
-              );
-            }
-
-            return fastAnnotationHooksPromise.then(hooks => hooks.transform(code, id, meta));
-          },
-        };
-      })()
-    : undefined;
 
   const transformReplace = Object.keys(replacementValues).length > 0;
   const shouldTransform = transformAnnotations || transformReplace;
@@ -208,21 +177,8 @@ export function _rollupPluginInternal(
   ): Promise<TransformResult> {
     // Component annotations are only in user code and boolean flag replacements are
     // only in Sentry code. If we successfully add annotations, we can return early.
-    let shouldRunBabelAnnotations = true;
-
-    if (transformFastAnnotations?.transform) {
-      const result = await transformFastAnnotations.transform(code, id, meta);
-      if (result) {
-        return result;
-      }
-
-      if (result === null) {
-        shouldRunBabelAnnotations = false;
-      }
-    }
-
-    if (shouldRunBabelAnnotations && transformAnnotations?.transform) {
-      const result = await transformAnnotations.transform(code, id);
+    if (transformAnnotations) {
+      const result = await transformAnnotations.transform(code, id, meta);
       if (result) {
         return result;
       }

packages/bundler-plugins/test/rollup/public-api.test.ts

@@ -53,15 +53,22 @@ test('Rollup plugin should exist', () => {
   expect(typeof sentryRollupPlugin).toBe('function');
 });
 
-test('component annotations only load Babel when the Babel transform runs', async () => {
+test('component annotations only load Babel when the fast path cannot annotate a file', async () => {
   expect(babelCoreImportMock).not.toHaveBeenCalled();
 
   const hooks = createComponentNameAnnotateHooks([], false);
 
-  await hooks.transform('const x = 1;', '/src/plain.js');
+  annotationTransformMock.mockResolvedValueOnce(null as never);
+  await expect(hooks.transform('const x = 1;', '/src/plain.js')).resolves.toBeNull();
+
+  await expect(hooks.transform('export function App() { return <div />; }', '/src/app.jsx')).resolves.toEqual({
+    code: 'fast-path',
+    map: null,
+  });
 
   expect(babelCoreImportMock).not.toHaveBeenCalled();
 
+  annotationTransformMock.mockResolvedValueOnce(undefined as never);
   await hooks.transform('export function App() { return <div />; }', '/src/app.jsx');
 
   expect(babelCoreImportMock).toHaveBeenCalledTimes(1);

packages/nextjs/src/config/loaders/componentAnnotationLoader.ts

@@ -10,7 +10,7 @@ export type ComponentAnnotationLoaderOptions = {
  * `data-sentry-element`, and `data-sentry-source-file` attributes.
  *
  * This is the Turbopack equivalent of what `@sentry/bundler-plugins/webpack` does
- * via the `reactComponentAnnotation` option and `@sentry/babel-plugin-component-annotate`.
+ * via the `reactComponentAnnotation` option.
  *
  * Options:
  *   - `ignoredComponents`: List of component names to exclude from annotation.