[DevOverlay] cleanup hydration error UI #75499

ztanner · 2025-01-31T02:16:35Z

Before

After

Changes

Fixed hydration error title copy (missing colon at the end)
Fixed missing newlines in error notes
Updates the toggle icon to match the design
Adjusts CodeFrame padding to get closer to the design

Closes NDX-738
Closes NDX-741

ztanner · 2025-01-31T02:16:57Z

[DevOverlay] cleanup hydration error UI #75499 👈 (View in Graphite)
canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

ijjk · 2025-02-03T17:10:15Z

Failing test suites

Commit: f8ab348

__NEXT_EXPERIMENTAL_PPR=true pnpm test-dev test/development/app-dir/error-overlay/async-client-component/async-client-component.test.ts (PPR)

app-dir - async-client-component > app router client component async module

Expand output

● app-dir - async-client-component › app router client component async module

No Redbox to open.

  23 |     const browser = await next.browser('/client')
  24 |
> 25 |     await openRedbox(browser)
     |     ^
  26 |
  27 |     const description = await getRedboxDescription(browser)
  28 |     const componentStack = await getStackFramesContent(browser)

  at Object.<anonymous> (development/app-dir/error-overlay/async-client-component/async-client-component.test.ts:25:5)

Cause:
elementHandle.click: Element is not attached to the DOM
Call log:
  - attempting click action
  -   waiting for element to be visible, enabled and stable

  394 |   click() {
  395 |     return this.chain((el: ElementHandleExt) => {
> 396 |       return el.click().then(() => el)
      |                 ^
  397 |     })
  398 |   }
  399 |

  at click (lib/browsers/playwright.ts:396:17)
  at openRedbox (lib/next-test-utils.ts:913:7)
  at Object.<anonymous> (development/app-dir/error-overlay/async-client-component/async-client-component.test.ts:25:5)
  at Proxy.chain (lib/browsers/base.ts:17:23)
  at Proxy.chain (lib/browsers/playwright.ts:395:17)
  at click (lib/next-test-utils.ts:913:63)
  at Object.<anonymous> (development/app-dir/error-overlay/async-client-component/async-client-component.test.ts:25:5)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev-turbo test/development/acceptance-app/hydration-error.test.ts (turbopack)

Error overlay for hydration errors in App router > should show correct hydration error when client and server render different text
Error overlay for hydration errors in App router > should show correct hydration error when client renders an extra element
Error overlay for hydration errors in App router > should show correct hydration error when extra attributes set on server
Error overlay for hydration errors in App router > should show correct hydration error when client renders an extra text node
Error overlay for hydration errors in App router > should show correct hydration error when server renders an extra element
Error overlay for hydration errors in App router > should show correct hydration error when server renders an extra text node
Error overlay for hydration errors in App router > should show correct hydration error when server renders an extra text node in an invalid place
Error overlay for hydration errors in App router > should show correct hydration error when client renders an extra node inside Suspense content

Expand output

● Error overlay for hydration errors in App router › should show correct hydration error when client and server render different text

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when client and server render different text 1`

Snapshot: "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"
Received: "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:"

  76 |     expect(await getRedboxTotalErrorCount(browser)).toBe(1)
  77 |
> 78 |     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
     |                                                  ^
  79 |       `"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"`
  80 |     )
  81 |

  at Object.toMatchInlineSnapshot (development/acceptance-app/hydration-error.test.ts:78:50)

● Error overlay for hydration errors in App router › should show correct hydration error when client renders an extra element

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when client renders an extra element 2`

Snapshot: "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"
Received: "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:"

  173 |     }
  174 |
> 175 |     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      |                                                  ^
  176 |       `"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"`
  177 |     )
  178 |   })

  at Object.toMatchInlineSnapshot (development/acceptance-app/hydration-error.test.ts:175:50)

● Error overlay for hydration errors in App router › should show correct hydration error when extra attributes set on server

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when extra attributes set on server 2`

Snapshot: "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"
Received: "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:"

  209 |     expect(pseudoHtml).toMatchInlineSnapshot(`"- className="server-html""`)
  210 |
> 211 |     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      |                                                  ^
  212 |       `"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"`
  213 |     )
  214 |   })

  at Object.toMatchInlineSnapshot (development/acceptance-app/hydration-error.test.ts:211:50)

● Error overlay for hydration errors in App router › should show correct hydration error when client renders an extra text node

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when client renders an extra text node 1`

Snapshot: "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"
Received: "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:"

  259 |     }
  260 |
> 261 |     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      |                                                  ^
  262 |       `"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"`
  263 |     )
  264 |   })

  at Object.toMatchInlineSnapshot (development/acceptance-app/hydration-error.test.ts:261:50)

● Error overlay for hydration errors in App router › should show correct hydration error when server renders an extra element

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when server renders an extra element 1`

Snapshot: "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"
Received: "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:"

  304 |     }
  305 |
> 306 |     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      |                                                  ^
  307 |       `"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"`
  308 |     )
  309 |   })

  at Object.toMatchInlineSnapshot (development/acceptance-app/hydration-error.test.ts:306:50)

● Error overlay for hydration errors in App router › should show correct hydration error when server renders an extra text node

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when server renders an extra text node 1`

Snapshot: "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"
Received: "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:"

  330 |     expect(await getRedboxTotalErrorCount(browser)).toBe(1)
  331 |
> 332 |     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      |                                                  ^
  333 |       `"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"`
  334 |     )
  335 |

  at Object.toMatchInlineSnapshot (development/acceptance-app/hydration-error.test.ts:332:50)

● Error overlay for hydration errors in App router › should show correct hydration error when server renders an extra text node in an invalid place

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when server renders an extra text node in an invalid place 1`

Snapshot: "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"
Received: "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:"

  380 |
  381 |     // FIXME: Should also have "text nodes cannot be a child of tr"
> 382 |     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      |                                                  ^
  383 |       `"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"`
  384 |     )
  385 |

  at Object.toMatchInlineSnapshot (development/acceptance-app/hydration-error.test.ts:382:50)

● Error overlay for hydration errors in App router › should show correct hydration error when client renders an extra node inside Suspense content

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Error overlay for hydration errors in App router should show correct hydration error when client renders an extra node inside Suspense content 1`

Snapshot: "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"
Received: "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:"

  504 |     }
  505 |
> 506 |     expect(await session.getRedboxDescription()).toMatchInlineSnapshot(
      |                                                  ^
  507 |       `"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"`
  508 |     )
  509 |   })

  at Object.toMatchInlineSnapshot (development/acceptance-app/hydration-error.test.ts:506:50)

Read more about building and testing Next.js in contributing.md.

ijjk · 2025-02-03T19:23:31Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
buildDuration	17.3s	14.5s	N/A
buildDurationCached	13.7s	11.4s	N/A
nodeModulesSize	391 MB	391 MB	N/A
nextStartRea..uration (ms)	385ms	412ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
5306-HASH.js gzip	54 kB	54 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.46 kB	5.46 kB	N/A
bccd1874-HASH.js gzip	52.9 kB	52.9 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	240 B	242 B	N/A
main-HASH.js gzip	34.5 kB	34.4 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.59 kB	4.58 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.35 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
_buildManifest.js gzip	748 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
index.html gzip	523 B	524 B	N/A
link.html gzip	538 B	538 B	✓
withRouter.html gzip	519 B	520 B	N/A
Overall change	538 B	538 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
edge-ssr.js gzip	129 kB	129 kB	N/A
page.js gzip	210 kB	210 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
middleware-b..fest.js gzip	671 B	666 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.3 kB	31.3 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	844 B	844 B	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
app-page-exp...dev.js gzip	385 kB	385 kB	N/A
app-page-exp..prod.js gzip	132 kB	132 kB	✓
app-page-tur..prod.js gzip	145 kB	145 kB	✓
app-page-tur..prod.js gzip	141 kB	141 kB	✓
app-page.run...dev.js gzip	372 kB	372 kB	N/A
app-page.run..prod.js gzip	128 kB	128 kB	✓
app-route-ex...dev.js gzip	39.3 kB	39.3 kB	✓
app-route-ex..prod.js gzip	25.6 kB	25.6 kB	✓
app-route-tu..prod.js gzip	25.6 kB	25.6 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	40.8 kB	40.8 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
dist_client_...dev.js gzip	356 B	356 B	✓
dist_client_...dev.js gzip	349 B	349 B	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.8 kB	11.8 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	31.5 kB	31.5 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	60.2 kB	60.2 kB	✓
Overall change	895 kB	895 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-30-_devoverlay_cleanup_hydration_error_ui	Change
0.pack gzip	2.1 MB	2.1 MB	⚠️ +179 B
index.pack gzip	74.4 kB	75.2 kB	⚠️ +805 B
Overall change	2.18 MB	2.18 MB	⚠️ +984 B

Diff details

Diff for 5306-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 46ace56

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 31, 2025

ztanner marked this pull request as ready for review January 31, 2025 02:21

ztanner requested review from raunofreiberg, devjiwonchoi, eps1lon and gaojude January 31, 2025 02:21

gaojude approved these changes Jan 31, 2025

View reviewed changes

devjiwonchoi approved these changes Jan 31, 2025

View reviewed changes

ztanner force-pushed the 01-30-_devoverlay_cleanup_hydration_error_ui branch from 5d4e646 to 8deb065 Compare February 3, 2025 15:20

ztanner force-pushed the 01-30-_devoverlay_cleanup_hydration_error_ui branch from 8deb065 to 96a758b Compare February 3, 2025 18:22

ijjk added the tests label Feb 3, 2025

ztanner force-pushed the 01-30-_devoverlay_cleanup_hydration_error_ui branch from 96a758b to f8ab348 Compare February 3, 2025 20:56

[DevOverlay] cleanup hydration error UI

46ace56

ztanner force-pushed the 01-30-_devoverlay_cleanup_hydration_error_ui branch from f8ab348 to 46ace56 Compare February 3, 2025 21:17

huozhi enabled auto-merge (squash) February 3, 2025 22:05

huozhi approved these changes Feb 3, 2025

View reviewed changes

huozhi merged commit f412666 into canary Feb 3, 2025
131 checks passed

huozhi deleted the 01-30-_devoverlay_cleanup_hydration_error_ui branch February 3, 2025 22:11

github-actions bot added the locked label Feb 18, 2025

github-actions bot locked as resolved and limited conversation to collaborators Feb 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevOverlay] cleanup hydration error UI #75499

[DevOverlay] cleanup hydration error UI #75499

ztanner commented Jan 31, 2025 •

edited

Loading

ztanner commented Jan 31, 2025

ijjk commented Feb 3, 2025 •

edited

Loading

ijjk commented Feb 3, 2025 •

edited

Loading

[DevOverlay] cleanup hydration error UI #75499

[DevOverlay] cleanup hydration error UI #75499

Conversation

ztanner commented Jan 31, 2025 • edited Loading

Changes

ztanner commented Jan 31, 2025

ijjk commented Feb 3, 2025 • edited Loading

Failing test suites

ijjk commented Feb 3, 2025 • edited Loading

Stats from current PR

ztanner commented Jan 31, 2025 •

edited

Loading

ijjk commented Feb 3, 2025 •

edited

Loading

ijjk commented Feb 3, 2025 •

edited

Loading