feature(error): capture ssr error in overlay during dev

[huozhi]

What

When there's an SSR only error occured but browser client is all good, for example:

// page.js
'use client'

export default function Page() {
  if (typeof window === 'undefined') {
    throw new Error('SSR only error')
  }
  return <p>hello world</p>
}

In this case, we did logged the error in the terminal but the errors are not presented to users. So we developed a way that, when we find a SSR error, excluding the RSC one, we'll wrap it up as a hidden template tag in error html body and send to client during development. On client we can consume that serialized error from template attributes and report to dev overlay. It will be in an uninterruptive way that users can still see it, but not block on viewing the client rendered page.

Closes NDX-670

[huozhi]

• feature(error): capture ssr error in overlay during dev #74983 👈 (View in Graphite)
• rest errors queue after passing to handler #74982
• canary

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

[ijjk]

Failing test suites

Commit: a69f67c

pnpm test-dev test/development/app-dir/ssr-only-error/ssr-only-error.test.ts

• ssr-only-error > should show ssr only error in error overlay

Expand output

● ssr-only-error › should show ssr only error in error overlay

page.waitForSelector: Timeout 5000ms exceeded.
Call log:
  - waiting for locator('[data-nextjs-toast]')

  423 |     return this.chain(() => {
  424 |       return page
> 425 |         .waitForSelector(selector, { timeout, state: 'attached' })
      |          ^
  426 |         .then(async (el) => {
  427 |           // it seems selenium waits longer and tests rely on this behavior
  428 |           // so we wait for the load event fire before returning

  at waitForSelector (lib/browsers/playwright.ts:425:10)
  at BrowserInterface.chain (lib/browsers/base.ts:17:23)
  at BrowserInterface.chain [as waitForElementByCss] (lib/browsers/playwright.ts:423:17)
  at waitForElementByCss (lib/next-test-utils.ts:901:13)
  at Object.<anonymous> (development/app-dir/ssr-only-error/ssr-only-error.test.ts:20:21)
  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:901:62)
  at Object.<anonymous> (development/app-dir/ssr-only-error/ssr-only-error.test.ts:20:21)

● ssr-only-error › should show ssr only error in error overlay

Expected Redbox but found none

  905 |     throw error
  906 |   }
> 907 |   await assertHasRedbox(browser)
      |   ^
  908 | }
  909 |
  910 | export function getRedboxHeader(browser: BrowserInterface) {

  at openRedbox (lib/next-test-utils.ts:907:3)
  at Object.<anonymous> (development/app-dir/ssr-only-error/ssr-only-error.test.ts:20:5)

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

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js huozhi/01-16-handle_ssr_only_error	Change
buildDuration	17.1s	15.2s	N/A
buildDurationCached	14.4s	12.2s	N/A
nodeModulesSize	418 MB	418 MB	⚠️ +30.7 kB
nextStartRea..uration (ms)	418ms	415ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js huozhi/01-16-handle_ssr_only_error	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.44 kB	5.44 kB	N/A
bccd1874-HASH.js gzip	52.9 kB	52.9 kB	✓
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.4 kB	34.4 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	52.9 kB	52.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js huozhi/01-16-handle_ssr_only_error	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 huozhi/01-16-handle_ssr_only_error	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.57 kB	4.57 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 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 huozhi/01-16-handle_ssr_only_error	Change
_buildManifest.js gzip	749 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js huozhi/01-16-handle_ssr_only_error	Change
index.html gzip	524 B	524 B	✓
link.html gzip	538 B	538 B	✓
withRouter.html gzip	519 B	521 B	N/A
Overall change	1.06 kB	1.06 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js huozhi/01-16-handle_ssr_only_error	Change
edge-ssr.js gzip	129 kB	129 kB	N/A
page.js gzip	208 kB	208 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js huozhi/01-16-handle_ssr_only_error	Change
middleware-b..fest.js gzip	669 B	667 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 Overall increase ⚠️

	vercel/next.js canary	vercel/next.js huozhi/01-16-handle_ssr_only_error	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	374 kB	374 kB	⚠️ +104 B
app-page-exp..prod.js gzip	130 kB	130 kB	N/A
app-page-tur..prod.js gzip	143 kB	143 kB	N/A
app-page-tur..prod.js gzip	139 kB	139 kB	N/A
app-page.run...dev.js gzip	362 kB	362 kB	⚠️ +101 B
app-page.run..prod.js gzip	126 kB	126 kB	N/A
app-route-ex...dev.js gzip	37.6 kB	37.6 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	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 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	27.7 kB	27.7 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	1.93 MB	1.93 MB	⚠️ +205 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js huozhi/01-16-handle_ssr_only_error	Change
0.pack gzip	2.1 MB	2.09 MB	N/A
index.pack gzip	74.4 kB	75.5 kB	⚠️ +1.14 kB
Overall change	74.4 kB	75.5 kB	⚠️ +1.14 kB

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-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Commit: a59a806

[eps1lon]

This doesn't really work. You're reading a mutable source during render. Why do we need to read these from the DOM instead of passing the data around?

[eps1lon]

I see now. I guess we're never re-rendering the <template> and assume it's already there when we render here? Should still move the read into the effect though

[huozhi]

that would be late and we can't get the error.