test(e2e): Bring streaming cacheComponents app to parity with the static one

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/app/[id]/page.tsx

@@ -0,0 +1,23 @@
+import * as Sentry from '@sentry/nextjs';
+
+// Only `test` is prerendered at build time. `exception` and `message` are generated
+// on-demand at request time.
+export function generateStaticParams() {
+  return [{ id: 'test' }];
+}
+
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+
+  if (id === 'exception') {
+    Sentry.captureException(new Error('Test error from cache components page'));
+    return <p id="result">Error captured for id exception</p>;
+  }
+
+  if (id === 'message') {
+    Sentry.captureMessage('Test message from cache components page');
+    return <p id="result">Message captured for id message</p>;
+  }
+
+  return <p id="result">Hello, {id}!</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/app/api/hanging-fetch-data/route.ts

@@ -0,0 +1,3 @@
+export async function GET() {
+  return Response.json({ value: 'hanging-fetch-data' });
+}

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/app/capture-metadata/page.tsx

@@ -0,0 +1,15 @@
+import { captureException } from '@sentry/nextjs';
+import type { Metadata } from 'next';
+
+/**
+ * Calling captureException synchronously inside generateMetadata
+ * during `next build` prerender (cacheComponents). uuid4 -> crypto.randomUUID() runs
+ */
+export const generateMetadata = (): Metadata => {
+  captureException(new Error('diagnostic: data missing for this page'));
+  return { title: 'capture-metadata' };
+};
+
+export default function Page() {
+  return <h1>capture-metadata</h1>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/app/error-sentinel/[token]/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div id="sentinel-loading">Loading...</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/app/error-sentinel/[token]/page.tsx

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/nextjs';
+
+// Captures an error tagged with a caller-supplied unique token. Tests use this as a drain marker: the
+// token guarantees a cache miss, so the capture always happens on request, and its arrival proves the
+// event pipeline has drained past every earlier request.
+export default async function Page({ params }: { params: Promise<{ token: string }> }) {
+  const { token } = await params;
+
+  Sentry.captureException(new Error(`error-sentinel-${token}`));
+
+  return <p id="sentinel">{token}</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/app/hanging-fetch/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div id="loading">Loading...</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/app/hanging-fetch/page.tsx

@@ -0,0 +1,10 @@
+// This `fetch()` deliberately has no cache configuration. Under Cache Components, Next.js does not
+// issue such a request during a prerender - it hands out a promise that never settles and rejects it
+// with a `HANGING_PROMISE_REJECTION` digest once the prerender is aborted. That rejection surfaces in
+// this component and therefore in the Sentry server component wrapper, which must not report it.
+export default async function Page() {
+  const response = await fetch('http://localhost:3030/api/hanging-fetch-data');
+  const data = (await response.json()) as { value: string };
+
+  return <p id="fetched-value">{data.value}</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/package.json

@@ -46,6 +46,12 @@
     "extends": "../../package.json"
   },
   "sentryTest": {
-    "//": "TODO: Add variants for webpack once supported"
+    "variants": [
+      {
+        "build-command": "pnpm test:build-webpack",
+        "label": "nextjs-16-streaming-cacheComponents (webpack)",
+        "assert-command": "pnpm test:assert-webpack"
+      }
+    ]
   }
 }

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/tests/cacheComponents.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { waitForStreamedSpan, waitForStreamedSpans, getSpanOp } from '@sentry-internal/test-utils';
+import { getSpanOp, waitForError, waitForStreamedSpan, waitForStreamedSpans } from '@sentry-internal/test-utils';
 
 test('Should render cached component', async ({ page }) => {
   const spansPromise = waitForStreamedSpans('nextjs-16-streaming-cacheComponents', spans => {
@@ -49,6 +49,34 @@ test('Should generate metadata', async ({ page }) => {
   await expect(page).toHaveTitle('Cache Components Metadata Test');
 });
 
+// Capturing an event inside a Server Component that is (re)generated at request time must not
+// trip Next.js Cache Components prerender guards (`new Date()` / `crypto`).
+test('Should capture an exception from an on-demand generated Server Component', async ({ page }) => {
+  const errorPromise = waitForError('nextjs-16-streaming-cacheComponents', errorEvent => {
+    return errorEvent.exception?.values?.[0]?.value === 'Test error from cache components page';
+  });
+
+  await page.goto('/exception');
+
+  await expect(page.locator('#result')).toHaveText('Error captured for id exception');
+
+  const error = await errorPromise;
+  expect(error.exception?.values?.[0]?.value).toBe('Test error from cache components page');
+});
+
+test('Should capture a message from an on-demand generated Server Component', async ({ page }) => {
+  const messagePromise = waitForError('nextjs-16-streaming-cacheComponents', errorEvent => {
+    return errorEvent.message === 'Test message from cache components page';
+  });
+
+  await page.goto('/message');
+
+  await expect(page.locator('#result')).toHaveText('Message captured for id message');
+
+  const message = await messagePromise;
+  expect(message.message).toBe('Test message from cache components page');
+});
+
 test('Should generate metadata async', async ({ page }) => {
   const spansPromise = waitForStreamedSpans('nextjs-16-streaming-cacheComponents', spans => {
     return spans.some(
@@ -96,3 +124,10 @@ test('Prerendered shell does not stitch the pageload onto a stale trace', async
   expect(await page.locator('meta[name="sentry-trace"]').count()).toBe(0);
   expect(await page.locator('meta[name="baggage"]').count()).toBe(0);
 });
+
+test('Should prerender a page that captures an exception in generateMetadata', async ({ page }) => {
+  await page.goto('/capture-metadata');
+
+  await expect(page).toHaveTitle('capture-metadata');
+  await expect(page.locator('h1')).toHaveText('capture-metadata');
+});

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/tests/hangingPromiseRejection.spec.ts

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test';
+import { getSpanOp, waitForError, waitForStreamedSpan } from '@sentry-internal/test-utils';
+
+const HANGING_PROMISE_DIGEST_MESSAGE = 'rejects when the prerender is complete';
+
+// Under Cache Components, Next.js aborts prerenders by rejecting the promises it handed out for
+// uncached `fetch()` calls. React discards those rejections - they never affect the response - so the
+// Sentry wrappers must not report them. See https://github.com/getsentry/sentry-javascript/issues/23592
+//
+// Note this only exercises the regression under the webpack variant: server components are wrapped by
+// `wrappingLoader`, which Turbopack builds do not run, so there is no wrapper to observe the rejection
+// there. Under Turbopack the test still asserts the route renders and reports no errors.
+test('does not capture hanging prerender promise rejections on a runtime prefetch', async ({ page, request }) => {
+  const capturedHangingPromiseErrors: string[] = [];
+  void waitForError('nextjs-16-streaming-cacheComponents', errorEvent => {
+    const value = errorEvent.exception?.values?.[0]?.value ?? '';
+    if (value.includes(HANGING_PROMISE_DIGEST_MESSAGE)) {
+      capturedHangingPromiseErrors.push(value);
+    }
+    return false;
+  });
+
+  // `Next-Router-Prefetch: 2` is what the Next.js router sends for a runtime prefetch. It makes Next.js
+  // run a prerender at request time, which is what produces the hanging promise rejection. A plain
+  // document request only replays the shell that was prerendered at build time and would not trigger it.
+  const prefetchResponse = await request.get('/hanging-fetch', {
+    headers: { RSC: '1', 'Next-Router-Prefetch': '2' },
+  });
+  expect(prefetchResponse.ok()).toBe(true);
+
+  const serverSpanPromise = waitForStreamedSpan('nextjs-16-streaming-cacheComponents', span => {
+    return span.name === 'GET /hanging-fetch' && getSpanOp(span) === 'http.server' && span.is_segment;
+  });
+
+  await page.goto('/hanging-fetch');
+  await expect(page.locator('#fetched-value')).toHaveText('hanging-fetch-data');
+
+  expect(await serverSpanPromise).toBeDefined();
+
+  // Drain marker instead of a sleep: request a route that deliberately captures an error, tagged with a
+  // token unique to this run so it can never be served from cache. It is requested strictly after the
+  // prefetch, and the SDK flushes per request, so once this error arrives any error the prefetch had
+  // captured must already have arrived too. That makes the assertion below "nothing was captured"
+  // rather than "nothing had been captured yet". It doubles as a check that errors do flow at all.
+  const token = `${Date.now()}`;
+  const sentinelPromise = waitForError('nextjs-16-streaming-cacheComponents', errorEvent => {
+    return errorEvent.exception?.values?.[0]?.value === `error-sentinel-${token}`;
+  });
+
+  await page.goto(`/error-sentinel/${token}`);
+  await expect(page.locator('#sentinel')).toHaveText(token);
+  await sentinelPromise;
+
+  expect(capturedHangingPromiseErrors).toEqual([]);
+});