getsentry · chargome · Nov 25, 2025 · Nov 24, 2025 · Nov 24, 2025 · Nov 24, 2025
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.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
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <DynamicContent />
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ 'use cache';
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/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>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return <p>Next 16 CacheComponents test app</p>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicContent />
+ </Suspense>
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ {
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+ },
+];
+
+export default eslintConfig;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('./sentry.server.config');
+ }
+
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('./sentry.edge.config');
+ }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
@@ -0,0 +1,10 @@
+import { withSentryConfig } from '@sentry/nextjs';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+ cacheComponents: true,
+};
+
+export default withSentryConfig(nextConfig, {
+ silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "nextjs-16-cacheComponents",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+ "dev:webpack": "next dev --webpack",
+ "build-webpack": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "test:prod": "TEST_ENV=production playwright test",
+ "test:dev": "TEST_ENV=development playwright test",
+ "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
+ "test:build": "pnpm install && pnpm build",
+ "test:build-webpack": "pnpm install && pnpm build-webpack",
+ "test:build-canary": "pnpm install && pnpm add next@canary && pnpm build",
+ "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
+ "test:build-latest-webpack": "pnpm install && pnpm add next@latest && pnpm build-webpack",
+ "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
+ "test:assert": "pnpm test:prod && pnpm test:dev",
+ "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack"
+ },
+ "dependencies": {
+ "@sentry/nextjs": "latest || *",
+ "@sentry/core": "latest || *",
+ "import-in-the-middle": "^1",
+ "next": "16.0.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
+ "require-in-the-middle": "^7",
+ "zod": "^3.22.4"
+ },
+ "devDependencies": {
+ "@playwright/test": "~1.53.2",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@types/node": "^20",
+ "@types/react": "^19",
+ "@types/react-dom": "^19",
+ "eslint": "^9",
+ "eslint-config-next": "canary",
+ "typescript": "^5"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "sentryTest": {
+ "//": "TODO: Add variants for webpack once supported"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
@@ -0,0 +1,29 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+ throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+ if (testEnv === 'development-webpack') {
+ return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'development') {
+ return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'production') {
+ return 'pnpm next start -p 3030';
+ }
+
+ throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+ startCommand: getStartCommand(),
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+ Sentry.setTag('my-isolated-tag', true);
+ Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+ if (request.headers.has('x-should-throw')) {
+ throw new Error('Middleware Error');
+ }
+
+ if (request.headers.has('x-should-make-request')) {
+ await fetch('http://localhost:3030/');
+ }
+
+ return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+ matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
diff --git a/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg b/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+ integrations: [Sentry.vercelAIIntegration()],
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'nextjs-16-cacheComponents',
+ envelopeDumpPath: path.join(
+ process.cwd(),
+ `event-dumps/next-16-cacheComponents-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+ ),
+});
diff --git a/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts b/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should render cached component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/cache');
+ const serverTx = await serverTxPromise;
+
+ // we want to skip creating spans in cached environments
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
+
+test('Should render suspense component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/suspense');
+ const serverTx = await serverTxPromise;
+
+ // this will be called several times in development mode, so we need to check for at least one span
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.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
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <DynamicContent />
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ 'use cache';
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/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>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return <p>Next 16 CacheComponents test app</p>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicContent />
+ </Suspense>
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ {
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+ },
+];
+
+export default eslintConfig;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('./sentry.server.config');
+ }
+
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('./sentry.edge.config');
+ }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
@@ -0,0 +1,10 @@
+import { withSentryConfig } from '@sentry/nextjs';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+ cacheComponents: true,
+};
+
+export default withSentryConfig(nextConfig, {
+ silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "nextjs-16-cacheComponents",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+ "dev:webpack": "next dev --webpack",
+ "build-webpack": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "test:prod": "TEST_ENV=production playwright test",
+ "test:dev": "TEST_ENV=development playwright test",
+ "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
+ "test:build": "pnpm install && pnpm build",
+ "test:build-webpack": "pnpm install && pnpm build-webpack",
+ "test:build-canary": "pnpm install && pnpm add next@canary && pnpm build",
+ "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
+ "test:build-latest-webpack": "pnpm install && pnpm add next@latest && pnpm build-webpack",
+ "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
+ "test:assert": "pnpm test:prod && pnpm test:dev",
+ "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack"
+ },
+ "dependencies": {
+ "@sentry/nextjs": "latest || *",
+ "@sentry/core": "latest || *",
+ "import-in-the-middle": "^1",
+ "next": "16.0.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
+ "require-in-the-middle": "^7",
+ "zod": "^3.22.4"
+ },
+ "devDependencies": {
+ "@playwright/test": "~1.53.2",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@types/node": "^20",
+ "@types/react": "^19",
+ "@types/react-dom": "^19",
+ "eslint": "^9",
+ "eslint-config-next": "canary",
+ "typescript": "^5"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "sentryTest": {
+ "//": "TODO: Add variants for webpack once supported"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
@@ -0,0 +1,29 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+ throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+ if (testEnv === 'development-webpack') {
+ return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'development') {
+ return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'production') {
+ return 'pnpm next start -p 3030';
+ }
+
+ throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+ startCommand: getStartCommand(),
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+ Sentry.setTag('my-isolated-tag', true);
+ Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+ if (request.headers.has('x-should-throw')) {
+ throw new Error('Middleware Error');
+ }
+
+ if (request.headers.has('x-should-make-request')) {
+ await fetch('http://localhost:3030/');
+ }
+
+ return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+ matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
diff --git a/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg b/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+ integrations: [Sentry.vercelAIIntegration()],
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'nextjs-16-cacheComponents',
+ envelopeDumpPath: path.join(
+ process.cwd(),
+ `event-dumps/next-16-cacheComponents-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+ ),
+});
diff --git a/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts b/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should render cached component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/cache');
+ const serverTx = await serverTxPromise;
+
+ // we want to skip creating spans in cached environments
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
+
+test('Should render suspense component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/suspense');
+ const serverTx = await serverTxPromise;
+
+ // this will be called several times in development mode, so we need to check for at least one span
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.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
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <DynamicContent />
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ 'use cache';
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/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>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return <p>Next 16 CacheComponents test app</p>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicContent />
+ </Suspense>
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ {
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+ },
+];
+
+export default eslintConfig;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('./sentry.server.config');
+ }
+
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('./sentry.edge.config');
+ }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
@@ -0,0 +1,10 @@
+import { withSentryConfig } from '@sentry/nextjs';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+ cacheComponents: true,
+};
+
+export default withSentryConfig(nextConfig, {
+ silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "nextjs-16-cacheComponents",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+ "dev:webpack": "next dev --webpack",
+ "build-webpack": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "test:prod": "TEST_ENV=production playwright test",
+ "test:dev": "TEST_ENV=development playwright test",
+ "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
+ "test:build": "pnpm install && pnpm build",
+ "test:build-webpack": "pnpm install && pnpm build-webpack",
+ "test:build-canary": "pnpm install && pnpm add next@canary && pnpm build",
+ "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
+ "test:build-latest-webpack": "pnpm install && pnpm add next@latest && pnpm build-webpack",
+ "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
+ "test:assert": "pnpm test:prod && pnpm test:dev",
+ "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack"
+ },
+ "dependencies": {
+ "@sentry/nextjs": "latest || *",
+ "@sentry/core": "latest || *",
+ "import-in-the-middle": "^1",
+ "next": "16.0.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
+ "require-in-the-middle": "^7",
+ "zod": "^3.22.4"
+ },
+ "devDependencies": {
+ "@playwright/test": "~1.53.2",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@types/node": "^20",
+ "@types/react": "^19",
+ "@types/react-dom": "^19",
+ "eslint": "^9",
+ "eslint-config-next": "canary",
+ "typescript": "^5"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "sentryTest": {
+ "//": "TODO: Add variants for webpack once supported"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
@@ -0,0 +1,29 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+ throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+ if (testEnv === 'development-webpack') {
+ return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'development') {
+ return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'production') {
+ return 'pnpm next start -p 3030';
+ }
+
+ throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+ startCommand: getStartCommand(),
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+ Sentry.setTag('my-isolated-tag', true);
+ Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+ if (request.headers.has('x-should-throw')) {
+ throw new Error('Middleware Error');
+ }
+
+ if (request.headers.has('x-should-make-request')) {
+ await fetch('http://localhost:3030/');
+ }
+
+ return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+ matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
diff --git a/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg b/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+ integrations: [Sentry.vercelAIIntegration()],
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'nextjs-16-cacheComponents',
+ envelopeDumpPath: path.join(
+ process.cwd(),
+ `event-dumps/next-16-cacheComponents-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+ ),
+});
diff --git a/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts b/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should render cached component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/cache');
+ const serverTx = await serverTxPromise;
+
+ // we want to skip creating spans in cached environments
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
+
+test('Should render suspense component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/suspense');
+ const serverTx = await serverTxPromise;
+
+ // this will be called several times in development mode, so we need to check for at least one span
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.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
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <DynamicContent />
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ 'use cache';
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/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>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return <p>Next 16 CacheComponents test app</p>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicContent />
+ </Suspense>
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ {
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+ },
+];
+
+export default eslintConfig;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('./sentry.server.config');
+ }
+
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('./sentry.edge.config');
+ }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
@@ -0,0 +1,10 @@
+import { withSentryConfig } from '@sentry/nextjs';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+ cacheComponents: true,
+};
+
+export default withSentryConfig(nextConfig, {
+ silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "nextjs-16-cacheComponents",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+ "dev:webpack": "next dev --webpack",
+ "build-webpack": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "test:prod": "TEST_ENV=production playwright test",
+ "test:dev": "TEST_ENV=development playwright test",
+ "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
+ "test:build": "pnpm install && pnpm build",
+ "test:build-webpack": "pnpm install && pnpm build-webpack",
+ "test:build-canary": "pnpm install && pnpm add next@canary && pnpm build",
+ "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
+ "test:build-latest-webpack": "pnpm install && pnpm add next@latest && pnpm build-webpack",
+ "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
+ "test:assert": "pnpm test:prod && pnpm test:dev",
+ "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack"
+ },
+ "dependencies": {
+ "@sentry/nextjs": "latest || *",
+ "@sentry/core": "latest || *",
+ "import-in-the-middle": "^1",
+ "next": "16.0.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
+ "require-in-the-middle": "^7",
+ "zod": "^3.22.4"
+ },
+ "devDependencies": {
+ "@playwright/test": "~1.53.2",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@types/node": "^20",
+ "@types/react": "^19",
+ "@types/react-dom": "^19",
+ "eslint": "^9",
+ "eslint-config-next": "canary",
+ "typescript": "^5"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "sentryTest": {
+ "//": "TODO: Add variants for webpack once supported"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
@@ -0,0 +1,29 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+ throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+ if (testEnv === 'development-webpack') {
+ return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'development') {
+ return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'production') {
+ return 'pnpm next start -p 3030';
+ }
+
+ throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+ startCommand: getStartCommand(),
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+ Sentry.setTag('my-isolated-tag', true);
+ Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+ if (request.headers.has('x-should-throw')) {
+ throw new Error('Middleware Error');
+ }
+
+ if (request.headers.has('x-should-make-request')) {
+ await fetch('http://localhost:3030/');
+ }
+
+ return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+ matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
diff --git a/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg b/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+ integrations: [Sentry.vercelAIIntegration()],
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'nextjs-16-cacheComponents',
+ envelopeDumpPath: path.join(
+ process.cwd(),
+ `event-dumps/next-16-cacheComponents-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+ ),
+});
diff --git a/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts b/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should render cached component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/cache');
+ const serverTx = await serverTxPromise;
+
+ // we want to skip creating spans in cached environments
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
+
+test('Should render suspense component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/suspense');
+ const serverTx = await serverTxPromise;
+
+ // this will be called several times in development mode, so we need to check for at least one span
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.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
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <DynamicContent />
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ 'use cache';
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/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>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return <p>Next 16 CacheComponents test app</p>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicContent />
+ </Suspense>
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ {
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+ },
+];
+
+export default eslintConfig;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('./sentry.server.config');
+ }
+
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('./sentry.edge.config');
+ }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
@@ -0,0 +1,10 @@
+import { withSentryConfig } from '@sentry/nextjs';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+ cacheComponents: true,
+};
+
+export default withSentryConfig(nextConfig, {
+ silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "nextjs-16-cacheComponents",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+ "dev:webpack": "next dev --webpack",
+ "build-webpack": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "test:prod": "TEST_ENV=production playwright test",
+ "test:dev": "TEST_ENV=development playwright test",
+ "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
+ "test:build": "pnpm install && pnpm build",
+ "test:build-webpack": "pnpm install && pnpm build-webpack",
+ "test:build-canary": "pnpm install && pnpm add next@canary && pnpm build",
+ "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
+ "test:build-latest-webpack": "pnpm install && pnpm add next@latest && pnpm build-webpack",
+ "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
+ "test:assert": "pnpm test:prod && pnpm test:dev",
+ "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack"
+ },
+ "dependencies": {
+ "@sentry/nextjs": "latest || *",
+ "@sentry/core": "latest || *",
+ "import-in-the-middle": "^1",
+ "next": "16.0.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
+ "require-in-the-middle": "^7",
+ "zod": "^3.22.4"
+ },
+ "devDependencies": {
+ "@playwright/test": "~1.53.2",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@types/node": "^20",
+ "@types/react": "^19",
+ "@types/react-dom": "^19",
+ "eslint": "^9",
+ "eslint-config-next": "canary",
+ "typescript": "^5"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "sentryTest": {
+ "//": "TODO: Add variants for webpack once supported"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
@@ -0,0 +1,29 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+ throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+ if (testEnv === 'development-webpack') {
+ return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'development') {
+ return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'production') {
+ return 'pnpm next start -p 3030';
+ }
+
+ throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+ startCommand: getStartCommand(),
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+ Sentry.setTag('my-isolated-tag', true);
+ Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+ if (request.headers.has('x-should-throw')) {
+ throw new Error('Middleware Error');
+ }
+
+ if (request.headers.has('x-should-make-request')) {
+ await fetch('http://localhost:3030/');
+ }
+
+ return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+ matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
diff --git a/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg b/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+ integrations: [Sentry.vercelAIIntegration()],
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'nextjs-16-cacheComponents',
+ envelopeDumpPath: path.join(
+ process.cwd(),
+ `event-dumps/next-16-cacheComponents-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+ ),
+});
diff --git a/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts b/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should render cached component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/cache');
+ const serverTx = await serverTxPromise;
+
+ // we want to skip creating spans in cached environments
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
+
+test('Should render suspense component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/suspense');
+ const serverTx = await serverTxPromise;
+
+ // this will be called several times in development mode, so we need to check for at least one span
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.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
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <DynamicContent />
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ 'use cache';
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/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>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return <p>Next 16 CacheComponents test app</p>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicContent />
+ </Suspense>
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ {
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+ },
+];
+
+export default eslintConfig;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('./sentry.server.config');
+ }
+
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('./sentry.edge.config');
+ }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
@@ -0,0 +1,10 @@
+import { withSentryConfig } from '@sentry/nextjs';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+ cacheComponents: true,
+};
+
+export default withSentryConfig(nextConfig, {
+ silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "nextjs-16-cacheComponents",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+ "dev:webpack": "next dev --webpack",
+ "build-webpack": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "test:prod": "TEST_ENV=production playwright test",
+ "test:dev": "TEST_ENV=development playwright test",
+ "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
+ "test:build": "pnpm install && pnpm build",
+ "test:build-webpack": "pnpm install && pnpm build-webpack",
+ "test:build-canary": "pnpm install && pnpm add next@canary && pnpm build",
+ "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
+ "test:build-latest-webpack": "pnpm install && pnpm add next@latest && pnpm build-webpack",
+ "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
+ "test:assert": "pnpm test:prod && pnpm test:dev",
+ "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack"
+ },
+ "dependencies": {
+ "@sentry/nextjs": "latest || *",
+ "@sentry/core": "latest || *",
+ "import-in-the-middle": "^1",
+ "next": "16.0.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
+ "require-in-the-middle": "^7",
+ "zod": "^3.22.4"
+ },
+ "devDependencies": {
+ "@playwright/test": "~1.53.2",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@types/node": "^20",
+ "@types/react": "^19",
+ "@types/react-dom": "^19",
+ "eslint": "^9",
+ "eslint-config-next": "canary",
+ "typescript": "^5"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "sentryTest": {
+ "//": "TODO: Add variants for webpack once supported"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
@@ -0,0 +1,29 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+ throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+ if (testEnv === 'development-webpack') {
+ return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'development') {
+ return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'production') {
+ return 'pnpm next start -p 3030';
+ }
+
+ throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+ startCommand: getStartCommand(),
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+ Sentry.setTag('my-isolated-tag', true);
+ Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+ if (request.headers.has('x-should-throw')) {
+ throw new Error('Middleware Error');
+ }
+
+ if (request.headers.has('x-should-make-request')) {
+ await fetch('http://localhost:3030/');
+ }
+
+ return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+ matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
diff --git a/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg b/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+ integrations: [Sentry.vercelAIIntegration()],
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'nextjs-16-cacheComponents',
+ envelopeDumpPath: path.join(
+ process.cwd(),
+ `event-dumps/next-16-cacheComponents-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+ ),
+});
diff --git a/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts b/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should render cached component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/cache');
+ const serverTx = await serverTxPromise;
+
+ // we want to skip creating spans in cached environments
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
+
+test('Should render suspense component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/suspense');
+ const serverTx = await serverTxPromise;
+
+ // this will be called several times in development mode, so we need to check for at least one span
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.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
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <DynamicContent />
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ 'use cache';
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/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>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return <p>Next 16 CacheComponents test app</p>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicContent />
+ </Suspense>
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ {
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+ },
+];
+
+export default eslintConfig;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('./sentry.server.config');
+ }
+
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('./sentry.edge.config');
+ }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
@@ -0,0 +1,10 @@
+import { withSentryConfig } from '@sentry/nextjs';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+ cacheComponents: true,
+};
+
+export default withSentryConfig(nextConfig, {
+ silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "nextjs-16-cacheComponents",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+ "dev:webpack": "next dev --webpack",
+ "build-webpack": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "test:prod": "TEST_ENV=production playwright test",
+ "test:dev": "TEST_ENV=development playwright test",
+ "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
+ "test:build": "pnpm install && pnpm build",
+ "test:build-webpack": "pnpm install && pnpm build-webpack",
+ "test:build-canary": "pnpm install && pnpm add next@canary && pnpm build",
+ "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
+ "test:build-latest-webpack": "pnpm install && pnpm add next@latest && pnpm build-webpack",
+ "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
+ "test:assert": "pnpm test:prod && pnpm test:dev",
+ "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack"
+ },
+ "dependencies": {
+ "@sentry/nextjs": "latest || *",
+ "@sentry/core": "latest || *",
+ "import-in-the-middle": "^1",
+ "next": "16.0.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
+ "require-in-the-middle": "^7",
+ "zod": "^3.22.4"
+ },
+ "devDependencies": {
+ "@playwright/test": "~1.53.2",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@types/node": "^20",
+ "@types/react": "^19",
+ "@types/react-dom": "^19",
+ "eslint": "^9",
+ "eslint-config-next": "canary",
+ "typescript": "^5"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "sentryTest": {
+ "//": "TODO: Add variants for webpack once supported"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
@@ -0,0 +1,29 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+ throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+ if (testEnv === 'development-webpack') {
+ return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'development') {
+ return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'production') {
+ return 'pnpm next start -p 3030';
+ }
+
+ throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+ startCommand: getStartCommand(),
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+ Sentry.setTag('my-isolated-tag', true);
+ Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+ if (request.headers.has('x-should-throw')) {
+ throw new Error('Middleware Error');
+ }
+
+ if (request.headers.has('x-should-make-request')) {
+ await fetch('http://localhost:3030/');
+ }
+
+ return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+ matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
diff --git a/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg b/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+ integrations: [Sentry.vercelAIIntegration()],
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'nextjs-16-cacheComponents',
+ envelopeDumpPath: path.join(
+ process.cwd(),
+ `event-dumps/next-16-cacheComponents-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+ ),
+});
diff --git a/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts b/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should render cached component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/cache');
+ const serverTx = await serverTxPromise;
+
+ // we want to skip creating spans in cached environments
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
+
+test('Should render suspense component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/suspense');
+ const serverTx = await serverTxPromise;
+
+ // this will be called several times in development mode, so we need to check for at least one span
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.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
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
@@ -0,0 +1,4 @@
+@sentry:registry=http://127.0.0.1:4873
+@sentry-internal:registry=http://127.0.0.1:4873
+public-hoist-pattern[]=*import-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <DynamicContent />
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ 'use cache';
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/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>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>{children}</body>
+ </html>
+ );
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return <p>Next 16 CacheComponents test app</p>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
@@ -0,0 +1,26 @@
+import { Suspense } from 'react';
+import * as Sentry from '@sentry/nextjs';
+
+export default function Page() {
+ return (
+ <>
+ <h1>This will be pre-rendered</h1>
+ <Suspense fallback={<div>Loading...</div>}>
+ <DynamicContent />
+ </Suspense>
+ </>
+ );
+}
+
+async function DynamicContent() {
+ const getTodos = async () => {
+ return Sentry.startSpan({ name: 'getTodos', op: 'get.todos' }, async () => {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ return [1, 2, 3, 4, 5];
+ });
+ };
+
+ const todos = await getTodos();
+
+ return <div id="todos-fetched">Todos fetched: {todos.length}</div>;
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
@@ -0,0 +1,19 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+ baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+ ...compat.extends('next/core-web-vitals', 'next/typescript'),
+ {
+ ignores: ['node_modules/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'],
+ },
+];
+
+export default eslintConfig;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs';
+
+export async function register() {
+ if (process.env.NEXT_RUNTIME === 'nodejs') {
+ await import('./sentry.server.config');
+ }
+
+ if (process.env.NEXT_RUNTIME === 'edge') {
+ await import('./sentry.edge.config');
+ }
+}
+
+export const onRequestError = Sentry.captureRequestError;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
@@ -0,0 +1,10 @@
+import { withSentryConfig } from '@sentry/nextjs';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+ cacheComponents: true,
+};
+
+export default withSentryConfig(nextConfig, {
+ silent: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
@@ -0,0 +1,51 @@
+{
+ "name": "nextjs-16-cacheComponents",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "clean": "npx rimraf node_modules pnpm-lock.yaml .tmp_dev_server_logs",
+ "dev:webpack": "next dev --webpack",
+ "build-webpack": "next build --webpack",
+ "start": "next start",
+ "lint": "eslint",
+ "test:prod": "TEST_ENV=production playwright test",
+ "test:dev": "TEST_ENV=development playwright test",
+ "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
+ "test:build": "pnpm install && pnpm build",
+ "test:build-webpack": "pnpm install && pnpm build-webpack",
+ "test:build-canary": "pnpm install && pnpm add next@canary && pnpm build",
+ "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
+ "test:build-latest-webpack": "pnpm install && pnpm add next@latest && pnpm build-webpack",
+ "test:build-canary-webpack": "pnpm install && pnpm add next@canary && pnpm build-webpack",
+ "test:assert": "pnpm test:prod && pnpm test:dev",
+ "test:assert-webpack": "pnpm test:prod && pnpm test:dev-webpack"
+ },
+ "dependencies": {
+ "@sentry/nextjs": "latest || *",
+ "@sentry/core": "latest || *",
+ "import-in-the-middle": "^1",
+ "next": "16.0.0",
+ "react": "19.1.0",
+ "react-dom": "19.1.0",
+ "require-in-the-middle": "^7",
+ "zod": "^3.22.4"
+ },
+ "devDependencies": {
+ "@playwright/test": "~1.53.2",
+ "@sentry-internal/test-utils": "link:../../../test-utils",
+ "@types/node": "^20",
+ "@types/react": "^19",
+ "@types/react-dom": "^19",
+ "eslint": "^9",
+ "eslint-config-next": "canary",
+ "typescript": "^5"
+ },
+ "volta": {
+ "extends": "../../package.json"
+ },
+ "sentryTest": {
+ "//": "TODO: Add variants for webpack once supported"
+ }
+}
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
@@ -0,0 +1,29 @@
+import { getPlaywrightConfig } from '@sentry-internal/test-utils';
+const testEnv = process.env.TEST_ENV;
+
+if (!testEnv) {
+ throw new Error('No test env defined');
+}
+
+const getStartCommand = () => {
+ if (testEnv === 'development-webpack') {
+ return 'pnpm next dev -p 3030 --webpack 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'development') {
+ return 'pnpm next dev -p 3030 2>&1 | tee .tmp_dev_server_logs';
+ }
+
+ if (testEnv === 'production') {
+ return 'pnpm next start -p 3030';
+ }
+
+ throw new Error(`Unknown test env: ${testEnv}`);
+};
+
+const config = getPlaywrightConfig({
+ startCommand: getStartCommand(),
+ port: 3030,
+});
+
+export default config;
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
@@ -0,0 +1,24 @@
+import { getDefaultIsolationScope } from '@sentry/core';
+import * as Sentry from '@sentry/nextjs';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function proxy(request: NextRequest) {
+ Sentry.setTag('my-isolated-tag', true);
+ Sentry.setTag('my-global-scope-isolated-tag', getDefaultIsolationScope().getScopeData().tags['my-isolated-tag']); // We set this tag to be able to assert that the previously set tag has not leaked into the global isolation scope
+
+ if (request.headers.has('x-should-throw')) {
+ throw new Error('Middleware Error');
+ }
+
+ if (request.headers.has('x-should-make-request')) {
+ await fetch('http://localhost:3030/');
+ }
+
+ return NextResponse.next();
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+ matcher: ['/api/endpoint-behind-middleware', '/api/endpoint-behind-faulty-middleware'],
+};
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
diff --git a/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg b/...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
diff --git a/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg b/...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/nextjs';
+
+Sentry.init({
+ environment: 'qa', // dynamic sampling bias to keep transactions
+ dsn: process.env.NEXT_PUBLIC_E2E_TEST_DSN,
+ tunnel: `http://localhost:3031/`, // proxy server
+ tracesSampleRate: 1.0,
+ sendDefaultPii: true,
+ // debug: true,
+ integrations: [Sentry.vercelAIIntegration()],
+});
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { startEventProxyServer } from '@sentry-internal/test-utils';
+
+const packageJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json')));
+
+startEventProxyServer({
+ port: 3031,
+ proxyServerName: 'nextjs-16-cacheComponents',
+ envelopeDumpPath: path.join(
+ process.cwd(),
+ `event-dumps/next-16-cacheComponents-v${packageJson.dependencies.next}-${process.env.TEST_ENV}.dump`,
+ ),
+});
diff --git a/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts b/...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+test('Should render cached component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/cache');
+ const serverTx = await serverTxPromise;
+
+ // we want to skip creating spans in cached environments
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos')).toHaveLength(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});
+
+test('Should render suspense component', async ({ page }) => {
+ const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', async transactionEvent => {
+ return transactionEvent.contexts?.trace?.op === 'http.server';
+ });
+
+ await page.goto('/suspense');
+ const serverTx = await serverTxPromise;
+
+ // this will be called several times in development mode, so we need to check for at least one span
+ expect(serverTx.spans?.filter(span => span.op === 'get.todos').length).toBeGreaterThan(0);
+ await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+});