tests

Author: chargome

dev-packages/e2e-tests/test-applications/nextjs-16/app/component-annotation/page.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+
+export default function ComponentAnnotationTestPage() {
+  return (
+    <div>
+      <button
+        id="annotated-btn"
+        onClick={() => {
+          Sentry.captureException(new Error('component-annotation-test'));
+        }}
+      >
+        Click Me
+      </button>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16/next.config.ts

@@ -11,5 +11,8 @@ export default withSentryConfig(nextConfig, {
   _experimental: {
     vercelCronsMonitoring: true,
     turbopackApplicationKey: 'nextjs-16-e2e',
+    turbopackReactComponentAnnotation: {
+      enabled: true,
+    },
   },
 });

dev-packages/e2e-tests/test-applications/nextjs-16/tests/component-annotation.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+const isWebpackDev = process.env.TEST_ENV === 'development-webpack';
+
+test('React component annotation adds data-sentry-component attributes (Turbopack)', async ({ page }) => {
+  test.skip(isWebpackDev, 'Only relevant for Turbopack builds');
+
+  await page.goto('/component-annotation');
+
+  const button = page.locator('#annotated-btn');
+  await expect(button).toBeVisible();
+
+  // Set up error listener before clicking
+  const errorPromise = waitForError('nextjs-16', errorEvent => {
+    return errorEvent?.exception?.values?.some(value => value.value === 'component-annotation-test') ?? false;
+  });
+
+  await button.click();
+  const errorEvent = await errorPromise;
+
+  expect(errorEvent.exception?.values?.[0]?.value).toBe('component-annotation-test');
+
+  // In production, TEST_ENV=production is shared by both turbopack and webpack variants.
+  // The component annotation loader only runs in Turbopack builds, so only assert
+  // DOM attributes and breadcrumb component names when the build is actually turbopack.
+  const annotatedEl = page.locator('[data-sentry-component="ComponentAnnotationTestPage"]');
+  const isAnnotated = (await annotatedEl.count()) > 0;
+
+  if (isAnnotated) {
+    await expect(annotatedEl).toBeVisible();
+
+    const clickBreadcrumb = errorEvent.breadcrumbs?.find(bc => bc.category === 'ui.click');
+    expect(clickBreadcrumb?.data?.['ui.component_name']).toBe('ComponentAnnotationTestPage');
+  }
+});

packages/nextjs/test/config/turbopack/constructTurbopackConfig.test.ts

@@ -17,6 +17,9 @@ vi.mock('path', async () => {
       if (lastArg === 'moduleMetadataInjectionLoader.js') {
         return '/mocked/path/to/moduleMetadataInjectionLoader.js';
       }
+      if (lastArg === 'componentAnnotationLoader.js') {
+        return '/mocked/path/to/componentAnnotationLoader.js';
+      }
       return '/mocked/path/to/valueInjectionLoader.js';
     }),
   };
@@ -1080,6 +1083,182 @@ describe('moduleMetadataInjection with applicationKey', () => {
   });
 });
 
+describe('componentAnnotation with turbopackReactComponentAnnotation', () => {
+  it('should add component annotation loader rule when enabled and Next.js >= 16', () => {
+    const pathResolveSpy = vi.spyOn(path, 'resolve');
+    pathResolveSpy.mockImplementation((...args: string[]) => {
+      const lastArg = args[args.length - 1];
+      if (lastArg === 'componentAnnotationLoader.js') {
+        return '/mocked/path/to/componentAnnotationLoader.js';
+      }
+      if (lastArg === 'moduleMetadataInjectionLoader.js') {
+        return '/mocked/path/to/moduleMetadataInjectionLoader.js';
+      }
+      return '/mocked/path/to/valueInjectionLoader.js';
+    });
+
+    const userNextConfig: NextConfigObject = {};
+
+    const result = constructTurbopackConfig({
+      userNextConfig,
+      userSentryOptions: {
+        _experimental: {
+          turbopackReactComponentAnnotation: { enabled: true },
+        },
+      },
+      nextJsVersion: '16.0.0',
+    });
+
+    expect(result.rules!['*.{tsx,jsx}']).toEqual({
+      condition: { not: 'foreign' },
+      loaders: [
+        {
+          loader: '/mocked/path/to/componentAnnotationLoader.js',
+          options: {
+            ignoredComponents: [],
+          },
+        },
+      ],
+    });
+  });
+
+  it('should NOT add component annotation rule when enabled is false', () => {
+    const userNextConfig: NextConfigObject = {};
+
+    const result = constructTurbopackConfig({
+      userNextConfig,
+      userSentryOptions: {
+        _experimental: {
+          turbopackReactComponentAnnotation: { enabled: false },
+        },
+      },
+      nextJsVersion: '16.0.0',
+    });
+
+    expect(result.rules!['*.{tsx,jsx}']).toBeUndefined();
+  });
+
+  it('should NOT add component annotation rule when not set', () => {
+    const userNextConfig: NextConfigObject = {};
+
+    const result = constructTurbopackConfig({
+      userNextConfig,
+      userSentryOptions: {},
+      nextJsVersion: '16.0.0',
+    });
+
+    expect(result.rules!['*.{tsx,jsx}']).toBeUndefined();
+  });
+
+  it('should NOT add component annotation rule when Next.js < 16', () => {
+    const userNextConfig: NextConfigObject = {};
+
+    const result = constructTurbopackConfig({
+      userNextConfig,
+      userSentryOptions: {
+        _experimental: {
+          turbopackReactComponentAnnotation: { enabled: true },
+        },
+      },
+      nextJsVersion: '15.4.1',
+    });
+
+    expect(result.rules!['*.{tsx,jsx}']).toBeUndefined();
+  });
+
+  it('should NOT add component annotation rule when nextJsVersion is undefined', () => {
+    const userNextConfig: NextConfigObject = {};
+
+    const result = constructTurbopackConfig({
+      userNextConfig,
+      userSentryOptions: {
+        _experimental: {
+          turbopackReactComponentAnnotation: { enabled: true },
+        },
+      },
+      nextJsVersion: undefined,
+    });
+
+    expect(result.rules!['*.{tsx,jsx}']).toBeUndefined();
+  });
+
+  it('should pass ignoredComponents to loader options', () => {
+    const pathResolveSpy = vi.spyOn(path, 'resolve');
+    pathResolveSpy.mockImplementation((...args: string[]) => {
+      const lastArg = args[args.length - 1];
+      if (lastArg === 'componentAnnotationLoader.js') {
+        return '/mocked/path/to/componentAnnotationLoader.js';
+      }
+      if (lastArg === 'moduleMetadataInjectionLoader.js') {
+        return '/mocked/path/to/moduleMetadataInjectionLoader.js';
+      }
+      return '/mocked/path/to/valueInjectionLoader.js';
+    });
+
+    const userNextConfig: NextConfigObject = {};
+
+    const result = constructTurbopackConfig({
+      userNextConfig,
+      userSentryOptions: {
+        _experimental: {
+          turbopackReactComponentAnnotation: {
+            enabled: true,
+            ignoredComponents: ['Header', 'Footer'],
+          },
+        },
+      },
+      nextJsVersion: '16.0.0',
+    });
+
+    const rule = result.rules!['*.{tsx,jsx}'] as {
+      condition: unknown;
+      loaders: Array<{ loader: string; options: { ignoredComponents: string[] } }>;
+    };
+    expect(rule.loaders[0]!.options.ignoredComponents).toEqual(['Header', 'Footer']);
+  });
+
+  it('should coexist with value injection and module metadata rules', () => {
+    const pathResolveSpy = vi.spyOn(path, 'resolve');
+    pathResolveSpy.mockImplementation((...args: string[]) => {
+      const lastArg = args[args.length - 1];
+      if (lastArg === 'componentAnnotationLoader.js') {
+        return '/mocked/path/to/componentAnnotationLoader.js';
+      }
+      if (lastArg === 'moduleMetadataInjectionLoader.js') {
+        return '/mocked/path/to/moduleMetadataInjectionLoader.js';
+      }
+      return '/mocked/path/to/valueInjectionLoader.js';
+    });
+
+    const userNextConfig: NextConfigObject = {};
+    const mockRouteManifest: RouteManifest = {
+      dynamicRoutes: [],
+      staticRoutes: [{ path: '/', regex: '/' }],
+      isrRoutes: [],
+    };
+
+    const result = constructTurbopackConfig({
+      userNextConfig,
+      userSentryOptions: {
+        _experimental: {
+          turbopackApplicationKey: 'my-app',
+          turbopackReactComponentAnnotation: { enabled: true },
+        },
+      },
+      routeManifest: mockRouteManifest,
+      nextJsVersion: '16.0.0',
+    });
+
+    // Value injection rules should be present
+    expect(result.rules!['**/instrumentation-client.*']).toBeDefined();
+    expect(result.rules!['**/instrumentation.*']).toBeDefined();
+    // Module metadata loader should be present
+    expect(result.rules!['*.{ts,tsx,js,jsx,mjs,cjs}']).toBeDefined();
+    // Component annotation loader should be present
+    expect(result.rules!['*.{tsx,jsx}']).toBeDefined();
+  });
+});
+
 describe('safelyAddTurbopackRule', () => {
   const mockRule = {
     loaders: [