Display global-error along dev overlay during development by huozhi · Pull Request #75101 · vercel/next.js

huozhi · 2025-01-20T12:00:54Z

What

Display global-error.js along with error overlay in development. When a runtime error occurred, you should be able to view the global-error.js content by just hiding the error overlay.

Why

Current behavior of global-error.js confused a lot of users that it only renders in production build, howerver in dev it's always shows the error overlay. This was considered "expected" before as you should focus on fixing error in dev. But this brings a lot of inconvenience for users, since they can't view the global-error.js easily in development but production build.

After

The global-error content is displayed in the html with error overlay covered

Before

Notice nothing displayed

Fixes #55462
Fixes #52993
Closes NDX-694

huozhi · 2025-01-20T12:01:10Z

Display global-error along dev overlay during development #75101 👈 (View in Graphite)
canary

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

ijjk · 2025-01-20T12:09:47Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js huozhi/01-20-show_global-error_in_dev	Change
buildDuration	17.4s	15.8s	N/A
buildDurationCached	14.8s	12.8s	N/A
nodeModulesSize	418 MB	418 MB	⚠️ +36.6 kB
nextStartRea..uration (ms)	403ms	398ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js huozhi/01-20-show_global-error_in_dev	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	243 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-20-show_global-error_in_dev	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-20-show_global-error_in_dev	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-20-show_global-error_in_dev	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-20-show_global-error_in_dev	Change
index.html gzip	524 B	524 B	✓
link.html gzip	539 B	536 B	N/A
withRouter.html gzip	520 B	520 B	✓
Overall change	1.04 kB	1.04 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js huozhi/01-20-show_global-error_in_dev	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-20-show_global-error_in_dev	Change
middleware-b..fest.js gzip	671 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-20-show_global-error_in_dev	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	375 kB	375 kB	⚠️ +178 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	363 kB	363 kB	⚠️ +177 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.94 MB	1.94 MB	⚠️ +355 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js huozhi/01-20-show_global-error_in_dev	Change
0.pack gzip	2.1 MB	2.1 MB	N/A
index.pack gzip	75 kB	75.4 kB	⚠️ +432 B
Overall change	75 kB	75.4 kB	⚠️ +432 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

failed to diff

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

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

Commit: 4f617b7

ijjk · 2025-01-20T12:16:59Z

Failing test suites

Commit: 4f617b7

pnpm test-start-turbo test/production/deployment-id-handling/deployment-id-handling.test.ts (turbopack)

deployment-id-handling disabled > should not append dpl query to all assets for /from-app
deployment-id-handling enabled with CUSTOM_DEPLOYMENT_ID > should contain deployment id in RSC payload request headers
deployment-id-handling enabled with NEXT_DEPLOYMENT_ID > should contain deployment id in RSC payload request headers

Expand output

● deployment-id-handling enabled with NEXT_DEPLOYMENT_ID › should contain deployment id in RSC payload request headers

page.waitForSelector: Timeout 60000ms exceeded.
Call log:
  - waiting for locator('#other-app')

  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 BrowserInterface.waitForElementByCss [as elementByCss] (lib/browsers/playwright.ts:343:17)
  at Object.elementByCss (production/deployment-id-handling/deployment-id-handling.test.ts:128:21)
  at Proxy.chain (lib/browsers/base.ts:17:23)
  at Proxy.chain (lib/browsers/playwright.ts:395:17)
  at Object.click (production/deployment-id-handling/deployment-id-handling.test.ts:128:48)

● deployment-id-handling enabled with CUSTOM_DEPLOYMENT_ID › should contain deployment id in RSC payload request headers

page.waitForSelector: Timeout 60000ms exceeded.
Call log:
  - waiting for locator('#other-app')

  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 BrowserInterface.waitForElementByCss [as elementByCss] (lib/browsers/playwright.ts:343:17)
  at Object.elementByCss (production/deployment-id-handling/deployment-id-handling.test.ts:128:21)
  at Proxy.chain (lib/browsers/base.ts:17:23)
  at Proxy.chain (lib/browsers/playwright.ts:395:17)
  at Object.click (production/deployment-id-handling/deployment-id-handling.test.ts:128:48)

● deployment-id-handling disabled › should not append dpl query to all assets for /from-app

page.waitForSelector: Timeout 60000ms exceeded.
Call log:
  - waiting for locator('#dynamic-import')

  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 BrowserInterface.waitForElementByCss [as elementByCss] (lib/browsers/playwright.ts:343:17)
  at elementByCss (production/deployment-id-handling/deployment-id-handling.test.ts:191:21)
  at Proxy.chain (lib/browsers/base.ts:17:23)
  at Proxy.chain (lib/browsers/playwright.ts:395:17)
  at click (production/deployment-id-handling/deployment-id-handling.test.ts:191:53)

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

devjiwonchoi · 2025-01-20T18:08:22Z

reactError not returned in getDerivedStateFromError on the new overlay, will follow up at #74999

### What This error boundary shouldnt exist in hello-world example, was accidentally added in #75101

display global-error along dev overlay during development

3c33f0a

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

docs: update global-error behavior

74efc8a

ijjk added the Documentation Related to Next.js' official documentation. label Jan 20, 2025

huozhi marked this pull request as ready for review January 20, 2025 12:25

huozhi requested review from devjiwonchoi, gaojude and ztanner January 20, 2025 12:25

improve tests readability

4f617b7

huozhi changed the title ~~display global-error along dev overlay during development~~ Display global-error along dev overlay during development Jan 20, 2025

gaojude approved these changes Jan 20, 2025

View reviewed changes

huozhi merged commit 303585a into canary Jan 20, 2025

huozhi deleted the huozhi/01-20-show_global-error_in_dev branch January 20, 2025 15:39

huozhi mentioned this pull request Jan 31, 2025

chore: remove global-error in hello-world example #75509

Merged

huozhi added a commit that referenced this pull request Feb 3, 2025

chore: remove global-error in hello-world example (#75509)

9aca660

### What This error boundary shouldnt exist in hello-world example, was accidentally added in #75101

github-actions Bot added the locked label Feb 4, 2025

github-actions Bot locked as resolved and limited conversation to collaborators Feb 4, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Display global-error along dev overlay during development#75101

Display global-error along dev overlay during development#75101
huozhi merged 3 commits into
canaryfrom
huozhi/01-20-show_global-error_in_dev

huozhi commented Jan 20, 2025 •

edited

Loading

Uh oh!

huozhi commented Jan 20, 2025

Uh oh!

ijjk commented Jan 20, 2025 •

edited

Loading

Uh oh!

ijjk commented Jan 20, 2025 •

edited

Loading

Uh oh!

devjiwonchoi commented Jan 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

huozhi commented Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

After

Before

Uh oh!

huozhi commented Jan 20, 2025

Uh oh!

ijjk commented Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stats from current PR

Uh oh!

ijjk commented Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Failing test suites

Uh oh!

devjiwonchoi commented Jan 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

huozhi commented Jan 20, 2025 •

edited

Loading

ijjk commented Jan 20, 2025 •

edited

Loading

ijjk commented Jan 20, 2025 •

edited

Loading