mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Jiwon Choi
d7aa66c345
### Why? Should come up with better solution that does not block PRs with git conflict x-ref: https://vercel.slack.com/archives/C02CDC2ALJH/p1785263902728189?thread_ts=1785263687.502649&cid=C02CDC2ALJH ### How? - Delete `errors.json`, the error-code SWC plugin, generated WASM, merge driver, and validation/build tooling. - Stop attaching error codes to server-rendering digests, redboxes, and telemetry; native `Error.code` and `Error.name` remain available where applicable. - Remove the development-overlay error feedback UI, middleware, and telemetry event that depended on stable codes. - Update fixtures, snapshots, and guidance for code-free errors and numeric-only digests. <!-- NEXT_JS_LLM -->
398 lines
16 KiB
TypeScript
398 lines
16 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
|
|
|
describe('hydration-error-count', () => {
|
|
const { next } = nextTestSetup({
|
|
files: __dirname,
|
|
})
|
|
|
|
it('should have correct hydration error count for bad nesting', async () => {
|
|
const browser = await next.browser('/bad-nesting')
|
|
|
|
if (process.env.__NEXT_CACHE_COMPONENTS) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
[
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
> <p>
|
|
> <p>
|
|
...
|
|
...
|
|
...",
|
|
"description": "In HTML, <p> cannot be a descendant of <p>.
|
|
This will cause a hydration error.",
|
|
"environmentLabel": null,
|
|
"label": "Console Error",
|
|
"source": "app/bad-nesting/page.tsx (6:7) @ Page
|
|
> 6 | <p>nest</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/bad-nesting/page.tsx (6:7)",
|
|
],
|
|
},
|
|
{
|
|
"description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
|
|
"environmentLabel": null,
|
|
"label": "Recoverable Error",
|
|
"source": "app/bad-nesting/page.tsx (6:7) @ Page
|
|
> 6 | <p>nest</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/bad-nesting/page.tsx (6:7)",
|
|
],
|
|
},
|
|
]
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
[
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
> <p>
|
|
> <p>
|
|
...
|
|
...
|
|
...",
|
|
"description": "In HTML, <p> cannot be a descendant of <p>.
|
|
This will cause a hydration error.",
|
|
"environmentLabel": null,
|
|
"label": "Console Error",
|
|
"source": "app/bad-nesting/page.tsx (6:7) @ Page
|
|
> 6 | <p>nest</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/bad-nesting/page.tsx (6:7)",
|
|
],
|
|
},
|
|
{
|
|
"description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
|
|
"environmentLabel": null,
|
|
"label": "Recoverable Error",
|
|
"source": "app/bad-nesting/page.tsx (6:7) @ Page
|
|
> 6 | <p>nest</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/bad-nesting/page.tsx (6:7)",
|
|
],
|
|
},
|
|
]
|
|
`)
|
|
}
|
|
})
|
|
|
|
it('should have correct hydration error count for html diff', async () => {
|
|
const browser = await next.browser('/html-diff')
|
|
|
|
if (process.env.__NEXT_CACHE_COMPONENTS) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
<p>
|
|
+ client
|
|
- server
|
|
...
|
|
...
|
|
...",
|
|
"description": "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
|
|
"environmentLabel": null,
|
|
"label": "Recoverable Error",
|
|
"source": "app/html-diff/page.tsx (4:10) @ Page
|
|
> 4 | return <p>{typeof window === 'undefined' ? 'server' : 'client'}</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/html-diff/page.tsx (4:10)",
|
|
],
|
|
}
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
<p>
|
|
+ client
|
|
- server
|
|
...
|
|
...
|
|
...",
|
|
"description": "Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
|
|
"environmentLabel": null,
|
|
"label": "Recoverable Error",
|
|
"source": "app/html-diff/page.tsx (4:10) @ Page
|
|
> 4 | return <p>{typeof window === 'undefined' ? 'server' : 'client'}</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/html-diff/page.tsx (4:10)",
|
|
],
|
|
}
|
|
`)
|
|
}
|
|
})
|
|
|
|
it('should display correct hydration info in each hydration error view', async () => {
|
|
const browser = await next.browser('/two-issues')
|
|
|
|
if (process.env.__NEXT_CACHE_COMPONENTS) {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
[
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
> <p className="client">
|
|
> <p>
|
|
...
|
|
...
|
|
...",
|
|
"description": "In HTML, <p> cannot be a descendant of <p>.
|
|
This will cause a hydration error.",
|
|
"environmentLabel": null,
|
|
"label": "Console Error",
|
|
"source": "app/two-issues/page.tsx (10:7) @ Page
|
|
> 10 | <p>nest</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/two-issues/page.tsx (10:7)",
|
|
],
|
|
},
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
<p
|
|
+ className="client"
|
|
- className="server"
|
|
>
|
|
...
|
|
...
|
|
...",
|
|
"description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
|
|
"environmentLabel": null,
|
|
"label": "Recoverable Error",
|
|
"source": "app/two-issues/page.tsx (10:7) @ Page
|
|
> 10 | <p>nest</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/two-issues/page.tsx (10:7)",
|
|
],
|
|
},
|
|
]
|
|
`)
|
|
} else {
|
|
await expect(browser).toDisplayCollapsedRedbox(`
|
|
[
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
> <p className="client">
|
|
> <p>
|
|
...
|
|
...
|
|
...",
|
|
"description": "In HTML, <p> cannot be a descendant of <p>.
|
|
This will cause a hydration error.",
|
|
"environmentLabel": null,
|
|
"label": "Console Error",
|
|
"source": "app/two-issues/page.tsx (10:7) @ Page
|
|
> 10 | <p>nest</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/two-issues/page.tsx (10:7)",
|
|
],
|
|
},
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
<p
|
|
+ className="client"
|
|
- className="server"
|
|
>
|
|
...
|
|
...
|
|
...",
|
|
"description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
|
|
"environmentLabel": null,
|
|
"label": "Recoverable Error",
|
|
"source": "app/two-issues/page.tsx (10:7) @ Page
|
|
> 10 | <p>nest</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/two-issues/page.tsx (10:7)",
|
|
],
|
|
},
|
|
]
|
|
`)
|
|
}
|
|
})
|
|
|
|
it('should display runtime error separately from hydration errors', async () => {
|
|
const browser = await next.browser('/hydration-with-runtime-errors')
|
|
|
|
await expect(browser).toDisplayRedbox(`
|
|
[
|
|
{
|
|
"componentStack": "...
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Next.js Internal Component>
|
|
<Page params={Promise} searchParams={Promise}>
|
|
> <p>
|
|
> <p>
|
|
...
|
|
...
|
|
...",
|
|
"description": "In HTML, <p> cannot be a descendant of <p>.
|
|
This will cause a hydration error.",
|
|
"environmentLabel": null,
|
|
"label": "Console Error",
|
|
"source": "app/hydration-with-runtime-errors/page.tsx (12:14) @ Page
|
|
> 12 | sneaky <p>very sneaky</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/hydration-with-runtime-errors/page.tsx (12:14)",
|
|
],
|
|
},
|
|
{
|
|
"description": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:",
|
|
"environmentLabel": null,
|
|
"label": "Recoverable Error",
|
|
"source": "app/hydration-with-runtime-errors/page.tsx (12:14) @ Page
|
|
> 12 | sneaky <p>very sneaky</p>
|
|
| ^",
|
|
"stack": [
|
|
"p <anonymous>",
|
|
"Page app/hydration-with-runtime-errors/page.tsx (12:14)",
|
|
],
|
|
},
|
|
{
|
|
"description": "runtime error",
|
|
"environmentLabel": null,
|
|
"label": "Runtime Error",
|
|
"source": "app/hydration-with-runtime-errors/page.tsx (7:11) @ Page.useEffect
|
|
> 7 | throw new Error('runtime error')
|
|
| ^",
|
|
"stack": [
|
|
"Page.useEffect app/hydration-with-runtime-errors/page.tsx (7:11)",
|
|
],
|
|
},
|
|
]
|
|
`)
|
|
})
|
|
})
|