mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
e9bc6190bd
### What? Redesigns the blocking-route error overlay for instant navigation errors with a distinct "Instant" overlay path, visual technique cards, and updated error wording framed around navigation impact. ### Why? The current overlay dumps every possible cause and fix in one block of text. The new design is friendlier — amber "Instant" badge, a short headline framed around navigation, and responsive code snippet cards showing each fix pattern. ### Demo - **Runtime template** (e.g. `cookies()`): https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/26-cookies-ssr-no-instant - **Dynamic template** (e.g. uncached `fetch`): https://error-messages-overhaul-ibsl.labs.vercel.dev/scenario/27-fetch-ssr-no-instant ### How? **Overlay** - New early-return path in `errors.tsx` for `blocking-route` errors without refinement — renders `InstantRuntimeError` with CodeFrame → description → technique cards → CallStack → ErrorCause - `InstantGuidance` component with responsive CSS grid of fix technique cards (3 per variant) - Color-coded cards with colored borders and matching highlight text (blue, purple, red) - "Make route params static" card (runtime only) has a dashed border indicating it's conditional **Build & CLI messages** - Build output messages extracted into `blocking-route-messages.ts` and deduplicated across `dynamic-rendering.ts` - `dynamicOrRuntimeBodyMessage` added for build-time static validation where the specific cause can't be pinpointed — lists all APIs (`fetch(...)`, `cookies()`, `headers()`, `params`, `searchParams`, `connection()`) - `isRuntimeVariant()` replaces the old `includes('cookies()')` heuristic which broke because both templates mention `cookies()` - `logBuildDebugHint()` extracted and shared between `logDisallowedDynamicError` and instant validation — adds "run `next dev`" and "`next build --debug-prerender`" hints to instant validation build output Results: <img width="2094" height="1478" alt="Google Chrome 2026-04-17 16 37 00" src="https://github.com/user-attachments/assets/04f126c5-250c-4e6e-bad0-d6960496cd13" /> <img width="1978" height="1512" alt="Google Chrome 2026-04-17 16 36 37" src="https://github.com/user-attachments/assets/46a502d8-9500-4055-814b-3efb739949db" /> --------- Co-authored-by: Janka Uryga <[email protected]>
353 lines
12 KiB
TypeScript
353 lines
12 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
|
import { waitForNoRedbox } from 'next-test-utils'
|
|
|
|
describe('Cache Components Fallback Validation', () => {
|
|
const { isTurbopack, next } = nextTestSetup({
|
|
files: __dirname,
|
|
})
|
|
|
|
it('should not warn about missing Suspense when accessing params if static params are completely known at build time', async () => {
|
|
// when the params are complete we don't expect to see any errors await params regarless of where there
|
|
// are Suspense boundaries.
|
|
const browser = await next.browser(
|
|
'/complete/prerendered/wrapped/prerendered'
|
|
)
|
|
await waitForNoRedbox(browser)
|
|
|
|
await browser.loadPage(`${next.url}/complete/prerendered/wrapped/novel`)
|
|
await waitForNoRedbox(browser)
|
|
|
|
await browser.loadPage(`${next.url}/complete/novel/wrapped/novel`)
|
|
await waitForNoRedbox(browser)
|
|
|
|
await browser.loadPage(
|
|
`${next.url}/complete/prerendered/unwrapped/prerendered`
|
|
)
|
|
await waitForNoRedbox(browser)
|
|
|
|
await browser.loadPage(`${next.url}/complete/prerendered/unwrapped/novel`)
|
|
await waitForNoRedbox(browser)
|
|
|
|
await browser.loadPage(`${next.url}/complete/novel/unwrapped/novel`)
|
|
await waitForNoRedbox(browser)
|
|
})
|
|
|
|
it('should warn about missing Suspense when accessing params if static params are partially known at build time', async () => {
|
|
// when the params are partially complete we don't expect to see any errors awaiting the params that are known
|
|
// but do expect errors awaiting the params that are not known if not inside a Suspense boundary.
|
|
const browser = await next.browser(
|
|
'/partial/prerendered/wrapped/prerendered'
|
|
)
|
|
await waitForNoRedbox(browser)
|
|
|
|
await browser.loadPage(`${next.url}/partial/prerendered/wrapped/novel`)
|
|
await waitForNoRedbox(browser)
|
|
|
|
await browser.loadPage(`${next.url}/partial/novel/wrapped/novel`)
|
|
await waitForNoRedbox(browser)
|
|
|
|
await browser.loadPage(
|
|
`${next.url}/partial/prerendered/unwrapped/prerendered`
|
|
)
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
|
|
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
|
|
| ^",
|
|
"stack": [
|
|
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
|
|
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
|
|
| ^",
|
|
"stack": [
|
|
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
|
|
await browser.loadPage(`${next.url}/partial/prerendered/unwrapped/novel`)
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
|
|
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
|
|
| ^",
|
|
"stack": [
|
|
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
|
|
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
|
|
| ^",
|
|
"stack": [
|
|
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
|
|
await browser.loadPage(`${next.url}/partial/novel/unwrapped/novel`)
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
|
|
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
|
|
| ^",
|
|
"stack": [
|
|
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26) @ Page
|
|
> 6 | Top: {(await props.params).top}, Bottom: {(await props.params).bottom}
|
|
| ^",
|
|
"stack": [
|
|
"Page app/partial/[top]/unwrapped/[bottom]/page.tsx (6:26)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
})
|
|
|
|
it('should warn about missing Suspense when accessing params if static params are entirely missing at build time', async () => {
|
|
// when the params are partially complete we don't expect to see any errors awaiting the params that are known
|
|
// but do expect errors awaiting the params that are not known if not inside a Suspense boundary.
|
|
const browser = await next.browser('/none/prerendered/wrapped/prerendered')
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
|
|
> 10 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
|
|
> 10 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
|
|
await browser.loadPage(`${next.url}/none/prerendered/wrapped/novel`)
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
|
|
> 10 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
|
|
> 10 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
|
|
await browser.loadPage(`${next.url}/none/novel/wrapped/novel`)
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
|
|
> 10 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/wrapped/layout.tsx (10:3) @ Layout
|
|
> 10 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/wrapped/layout.tsx (10:3)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
|
|
await browser.loadPage(`${next.url}/none/prerendered/unwrapped/prerendered`)
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
|
|
> 8 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
|
|
> 8 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
|
|
await browser.loadPage(`${next.url}/none/prerendered/unwrapped/novel`)
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
|
|
> 8 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
|
|
> 8 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
|
|
await browser.loadPage(`${next.url}/none/novel/unwrapped/novel`)
|
|
if (isTurbopack) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
|
|
> 8 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"code": "E1166",
|
|
"description": "Next.js encountered runtime data during the initial render.",
|
|
"environmentLabel": "Server",
|
|
"label": "Instant",
|
|
"source": "app/none/[top]/unwrapped/layout.tsx (8:3) @ Layout
|
|
> 8 | await params
|
|
| ^",
|
|
"stack": [
|
|
"Layout app/none/[top]/unwrapped/layout.tsx (8:3)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
})
|
|
})
|