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

`nextjs-16-streaming-cacheComponents` covered only 5 of the 9 tests its static counterpart runs. It was missing the two on-demand Server Component capture tests, the `generateMetadata` prerender test and the whole hanging promise rejection regression spec, along with the routes those need.

Ports the missing tests over and adds the webpack variant. The hanging promise regression is only observable under webpack, because server components are wrapped by `wrappingLoader`, which Turbopack builds do not run, so without that variant the ported spec would never exercise it.

Ref #23802
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: chargome

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