Skip to content

feat(nextjs): Support cacheComponents on turbopack #18304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chargome merged 8 commits into from
Nov 25, 2025
+534 −0
Merged

feat(nextjs): Support cacheComponents on turbopack #18304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f7fb5c4
add test
chargome Nov 24, 2025
5cf5d09
re-export span api
chargome Nov 24, 2025
aa4ef7a
correctly label optional tests
chargome Nov 24, 2025
4d0ff96
skip webpack tests
chargome Nov 24, 2025
84eeeb3
better tests
chargome Nov 25, 2025
0fe6aa3
better check
chargome Nov 25, 2025
7eca48e
Merge branch 'develop' into cg-next-cachecomponents
chargome Nov 25, 2025
40af06a
.
chargome Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 44 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
4 changes: 4 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/.npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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*
25 changes: 25 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/cache/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Suspense } from 'react';
import * as Sentry from '@sentry/nextjs';

export default function Page() {
Copy link

@lottamus lottamus Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chargome I've found cacheComponents still hits an error when pre-rendering a page with generateMetadata defined.

If you export a simple generateMetadata from this test page:

export async function generateMetadata() {
  return {
    title: 'Cache Components',
  };
}

you will receive the following error when running this test application:

[WebServer] Error: Route "/cache" used `crypto.randomUUID()` before accessing either uncached data (e.g. `fetch()`) or Request data (e.g. `cookies()`, `headers()`, `connection()`, and `searchParams`). Accessing random cryptographic values synchronously in a Server Component requires reading one of these data sources first. Alternatively, consider moving this expression into a Client Component or Cache Component. See more info here: https://nextjs.org/docs/messages/next-prerender-crypto
[WebServer]     at Next.MetadataOutlet (<anonymous>)

[WebServer]  GET /cache 200 in 2.5s (compile: 2.0s, render: 474ms)

Copy link

@albertocubeddu albertocubeddu Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me too!

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>;
}
Binary file added dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/favicon.ico
View file
Open in desktop
Binary file not shown.
23 changes: 23 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/global-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
7 changes: 7 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
3 changes: 3 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return <p>Next 16 CacheComponents test app</p>;
}
26 changes: 26 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/app/suspense/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>;
}
19 changes: 19 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
11 changes: 11 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation-client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
13 changes: 13 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/instrumentation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 10 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
});
51 changes: 51 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
29 changes: 29 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/playwright.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 24 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/proxy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'],
};
1 change: 1 addition & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/file.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions ...packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/globe.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/next.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions ...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/vercel.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions ...ackages/e2e-tests/test-applications/nextjs-16-cacheComponents/public/window.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.edge.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
});
11 changes: 11 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/sentry.server.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()],
});
14 changes: 14 additions & 0 deletions dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/start-event-proxy.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`,
),
});
28 changes: 28 additions & 0 deletions ...kages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheComponents.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
Loading