test(nextjs): Add next@16 e2e test

dev-packages/e2e-tests/test-applications/nextjs-16/.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Sentry Config File
+.env.sentry-build-plugin

dev-packages/e2e-tests/test-applications/nextjs-16/app/ai-error-test/page.tsx

@@ -0,0 +1,50 @@
+import { generateText } from 'ai';
+import { MockLanguageModelV1 } from 'ai/test';
+import { z } from 'zod';
+import * as Sentry from '@sentry/nextjs';
+
+export const dynamic = 'force-dynamic';
+
+// Error trace handling in tool calls
+async function runAITest() {
+  const result = await generateText({
+    experimental_telemetry: { isEnabled: true },
+    model: new MockLanguageModelV1({
+      doGenerate: async () => ({
+        rawCall: { rawPrompt: null, rawSettings: {} },
+        finishReason: 'tool-calls',
+        usage: { promptTokens: 15, completionTokens: 25 },
+        text: 'Tool call completed!',
+        toolCalls: [
+          {
+            toolCallType: 'function',
+            toolCallId: 'call-1',
+            toolName: 'getWeather',
+            args: '{ "location": "San Francisco" }',
+          },
+        ],
+      }),
+    }),
+    tools: {
+      getWeather: {
+        parameters: z.object({ location: z.string() }),
+        execute: async args => {
+          throw new Error('Tool call failed');
+        },
+      },
+    },
+    prompt: 'What is the weather in San Francisco?',
+  });
+}
+
+export default async function Page() {
+  await Sentry.startSpan({ op: 'function', name: 'ai-error-test' }, async () => {
+    return await runAITest();
+  });
+
+  return (
+    <div>
+      <h1>AI Test Results</h1>
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+import { generateText } from 'ai';
+import { MockLanguageModelV1 } from 'ai/test';
+import { z } from 'zod';
+import * as Sentry from '@sentry/nextjs';
+
+export const dynamic = 'force-dynamic';
+
+async function runAITest() {
+  // First span - telemetry should be enabled automatically but no input/output recorded when sendDefaultPii: true
+  const result1 = await generateText({
+    model: new MockLanguageModelV1({
+      doGenerate: async () => ({
+        rawCall: { rawPrompt: null, rawSettings: {} },
+        finishReason: 'stop',
+        usage: { promptTokens: 10, completionTokens: 20 },
+        text: 'First span here!',
+      }),
+    }),
+    prompt: 'Where is the first span?',
+  });
+
+  // Second span - explicitly enabled telemetry, should record inputs/outputs
+  const result2 = await generateText({
+    experimental_telemetry: { isEnabled: true },
+    model: new MockLanguageModelV1({
+      doGenerate: async () => ({
+        rawCall: { rawPrompt: null, rawSettings: {} },
+        finishReason: 'stop',
+        usage: { promptTokens: 10, completionTokens: 20 },
+        text: 'Second span here!',
+      }),
+    }),
+    prompt: 'Where is the second span?',
+  });
+
+  // Third span - with tool calls and tool results
+  const result3 = await generateText({
+    model: new MockLanguageModelV1({
+      doGenerate: async () => ({
+        rawCall: { rawPrompt: null, rawSettings: {} },
+        finishReason: 'tool-calls',
+        usage: { promptTokens: 15, completionTokens: 25 },
+        text: 'Tool call completed!',
+        toolCalls: [
+          {
+            toolCallType: 'function',
+            toolCallId: 'call-1',
+            toolName: 'getWeather',
+            args: '{ "location": "San Francisco" }',
+          },
+        ],
+      }),
+    }),
+    tools: {
+      getWeather: {
+        parameters: z.object({ location: z.string() }),
+        execute: async args => {
+          return `Weather in ${args.location}: Sunny, 72°F`;
+        },
+      },
+    },
+    prompt: 'What is the weather in San Francisco?',
+  });
+
+  // Fourth span - explicitly disabled telemetry, should not be captured
+  const result4 = await generateText({
+    experimental_telemetry: { isEnabled: false },
+    model: new MockLanguageModelV1({
+      doGenerate: async () => ({
+        rawCall: { rawPrompt: null, rawSettings: {} },
+        finishReason: 'stop',
+        usage: { promptTokens: 10, completionTokens: 20 },
+        text: 'Third span here!',
+      }),
+    }),
+    prompt: 'Where is the third span?',
+  });
+
+  return {
+    result1: result1.text,
+    result2: result2.text,
+    result3: result3.text,
+    result4: result4.text,
+  };
+}
+
+export default async function Page() {
+  const results = await Sentry.startSpan({ op: 'function', name: 'ai-test' }, async () => {
+    return await runAITest();
+  });
+
+  return (
+    <div>
+      <h1>AI Test Results</h1>
+      <pre id="ai-results">{JSON.stringify(results, null, 2)}</pre>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/global-error.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import NextError from 'next/error';
+import { useEffect } from 'react';
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/layout.tsx

@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/nested-rsc-error/[param]/page.tsx

@@ -0,0 +1,17 @@
+import { Suspense } from 'react';
+
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      {/* @ts-ignore */}
+      <Crash />;
+    </Suspense>
+  );
+}
+
+async function Crash() {
+  throw new Error('I am technically uncatchable');
+  return <p>unreachable</p>;
+}

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

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>Next 16 test app</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/pageload-tracing/layout.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+export const dynamic = 'force-dynamic';
+
+export default async function Layout({ children }: PropsWithChildren<unknown>) {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  return <>{children}</>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/pageload-tracing/page.tsx

@@ -0,0 +1,14 @@
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  return <p>I am page 2</p>;
+}
+
+export async function generateMetadata() {
+  (await fetch('https://example.com/', { cache: 'no-store' })).text();
+
+  return {
+    title: 'my title',
+  };
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/parameterized/[one]/beep/[two]/page.tsx

@@ -0,0 +1,3 @@
+export default function ParameterizedPage() {
+  return <div>Dynamic page two</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/parameterized/[one]/beep/page.tsx

@@ -0,0 +1,3 @@
+export default function BeepPage() {
+  return <div>Beep</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/parameterized/[one]/page.tsx

@@ -0,0 +1,3 @@
+export default function ParameterizedPage() {
+  return <div>Dynamic page one</div>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/parameterized/static/page.tsx

@@ -0,0 +1,3 @@
+export default function StaticPage() {
+  return <div>Static page</div>;
+}

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

@@ -0,0 +1,9 @@
+import Link from 'next/link';
+
+export default function Page() {
+  return (
+    <Link id="prefetch-link" href="/prefetching/to-be-prefetched">
+      link
+    </Link>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/prefetching/to-be-prefetched/page.tsx

@@ -0,0 +1,5 @@
+export const dynamic = 'force-dynamic';
+
+export default function Page() {
+  return <p>Hello</p>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/redirect/destination/page.tsx

@@ -0,0 +1,7 @@
+export default function RedirectDestinationPage() {
+  return (
+    <div>
+      <h1>Redirect Destination</h1>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/redirect/origin/page.tsx

@@ -0,0 +1,18 @@
+import { redirect } from 'next/navigation';
+
+async function redirectAction() {
+  'use server';
+
+  redirect('/redirect/destination');
+}
+
+export default function RedirectOriginPage() {
+  return (
+    <>
+      {/* @ts-ignore */}
+      <form action={redirectAction}>
+        <button type="submit">Redirect me</button>
+      </form>
+    </>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/route-handler/[xoxo]/edge/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from 'next/server';
+
+export const runtime = 'edge';
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  return NextResponse.json({ message: 'Hello Edge Route Handler' });
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/route-handler/[xoxo]/node/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  return NextResponse.json({ message: 'Hello Node Route Handler' });
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/streaming-rsc-error/[param]/client-page.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { use } from 'react';
+
+export function RenderPromise({ stringPromise }: { stringPromise: Promise<string> }) {
+  const s = use(stringPromise);
+  return <>{s}</>;
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/streaming-rsc-error/[param]/page.tsx

@@ -0,0 +1,18 @@
+import { Suspense } from 'react';
+import { RenderPromise } from './client-page';
+
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  const crashingPromise = new Promise<string>((_, reject) => {
+    setTimeout(() => {
+      reject(new Error('I am a data streaming error'));
+    }, 100);
+  });
+
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      <RenderPromise stringPromise={crashingPromise} />;
+    </Suspense>
+  );
+}

dev-packages/e2e-tests/test-applications/nextjs-16/app/suspense-error/page.tsx

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/nextjs';
+import { use } from 'react';
+export const dynamic = 'force-dynamic';
+
+export default async function Page() {
+  try {
+    use(fetch('https://example.com/'));
+  } catch (e) {
+    Sentry.captureException(e); // This error should not be reported
+    await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for any async event processors to run
+    await Sentry.flush();
+  }
+
+  return <p>test</p>;
+}