[DevOverlay] Decouple Error Overlay with DevTools Indicator #74999

devjiwonchoi · 2025-01-16T19:30:29Z

Why?

As we rendered the error overlay OR dev indicator at the container/errors component, decouple the indicator from the overlay and let them have their own display state.

How?

Converted app/react-dev-overlay to a functional component and ported the error boundary logic into a component.
Decoupled the display state for the DevTools Indicator and the Error Overlay.
- Changed the display state as visible or invisible (prev: 'minimized' | 'fullscreen' | 'hidden').

Before

CleanShot.2025-01-17.at.18.19.47.mp4

After

CleanShot.2025-01-17.at.18.17.52.mp4

Closes NDX-643
Closes NDX-669

devjiwonchoi · 2025-01-16T19:30:50Z

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

ijjk · 2025-01-17T08:40:47Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	Change
buildDuration	18s	15.4s	N/A
buildDurationCached	14.4s	12.4s	N/A
nodeModulesSize	418 MB	418 MB	⚠️ +56.1 kB
nextStartRea..uration (ms)	394ms	396ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	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 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	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-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	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 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	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 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	Change
index.html gzip	523 B	523 B	✓
link.html gzip	538 B	537 B	N/A
withRouter.html gzip	519 B	520 B	N/A
Overall change	523 B	523 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	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 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	Change
middleware-b..fest.js gzip	670 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-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	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	374 kB	N/A
app-page-exp..prod.js gzip	130 kB	130 kB	✓
app-page-tur..prod.js gzip	143 kB	143 kB	✓
app-page-tur..prod.js gzip	139 kB	139 kB	✓
app-page.run...dev.js gzip	363 kB	362 kB	N/A
app-page.run..prod.js gzip	126 kB	126 kB	✓
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.74 MB	1.74 MB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator	Change
0.pack gzip	2.1 MB	2.1 MB	⚠️ +5.17 kB
index.pack gzip	75.6 kB	74.4 kB	N/A
Overall change	2.1 MB	2.1 MB	⚠️ +5.17 kB

Diff details

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.runtime.dev.js

failed to diff

Commit: 22d1e8a

ijjk · 2025-01-17T08:56:22Z

Tests Passed

gaojude

approve with a nit

packages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx

packages/next/src/client/components/react-dev-overlay/_experimental/app/error-boundary.tsx

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

Co-authored-by: Jude Gao <jude.gao@vercel.com>

devjiwonchoi · 2025-01-21T04:00:43Z

Merge activity

Jan 20, 11:00 PM EST: A user started a stack merge that includes this pull request via Graphite.
Jan 20, 11:01 PM EST: A user merged this pull request with Graphite.

Enable the new UI for the CI testings of existing redbox tests. There are several changes made to let the test pass, including backporting changes to the old UI or removing one from the new, and are as follows: - Added back `|` after line number in code frame ([link](#74935 (comment))) - Removed unnecessary `@` in Terminal component ([link](#74935 (comment))) - Set open overlay default value to `true` in Pages Router ([link](#74935 (comment))) - Backport displaying the first first-party call stack frame to the CallStack component ([link](#74935 (comment))) - Move the devTools component back to the error boundary ([link](#74935 (comment))) - Was moved out at #74999 (comment) Closes NDX-674 Closes NDX-687

) ### Why? While decoupling the error overlay with the indicator at #74999, we lifted up calculating the `readyErrors` to the parent component. Therefore, passing the `errors` value to the `error.tsx` component is unnecessary. ### How? Removed the unused `errors` and `hasStaticIndicator` props from `errors.tsx` and its story.

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

This was referenced Jan 16, 2025

[DevOverlay] Fix floating header invisble on small screen #74886

Merged

[DevOverlay] Keep pagination on Build Error #74905

Merged

[DevOverlay] Gather Feedback per Error #74908

Merged

devjiwonchoi mentioned this pull request Jan 16, 2025

[DevOverlay] Align old and new overlay #74935

Merged

devjiwonchoi force-pushed the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch from d9a69c1 to c671e8a Compare January 16, 2025 19:32

devjiwonchoi changed the base branch from 01-16-_devoverlay_enable_new_ui_when_ppr_testing_is_enabled to 01-17-_devoverlay_rename_file_names_to_kebab January 16, 2025 19:32

devjiwonchoi mentioned this pull request Jan 16, 2025

[DevOverlay] Rename file names to kebab #75000

Merged

devjiwonchoi force-pushed the 01-17-_devoverlay_rename_file_names_to_kebab branch 3 times, most recently from bfdfe40 to ed3187a Compare January 16, 2025 21:14

devjiwonchoi force-pushed the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch from c671e8a to ddf157e Compare January 16, 2025 21:14

devjiwonchoi changed the base branch from 01-17-_devoverlay_rename_file_names_to_kebab to graphite-base/74999 January 16, 2025 21:39

devjiwonchoi force-pushed the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch from ddf157e to 970daea Compare January 16, 2025 21:39

devjiwonchoi force-pushed the graphite-base/74999 branch from ed3187a to cec4276 Compare January 16, 2025 21:39

devjiwonchoi changed the base branch from graphite-base/74999 to canary January 16, 2025 21:40

devjiwonchoi force-pushed the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch 2 times, most recently from 8bea48c to ac0f76f Compare January 17, 2025 00:38

devjiwonchoi marked this pull request as ready for review January 17, 2025 08:25

devjiwonchoi requested review from ztanner, huozhi, eps1lon and gaojude January 17, 2025 08:49

devjiwonchoi force-pushed the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch from 0d43d19 to 05b4b00 Compare January 17, 2025 08:53

devjiwonchoi mentioned this pull request Jan 17, 2025

[DevOverlay] Open Error Overlay when DevTools Indicator clicked #75025

Merged

devjiwonchoi force-pushed the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch from ede3650 to c6df338 Compare January 18, 2025 09:43

devjiwonchoi force-pushed the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch from c6df338 to d7209b6 Compare January 18, 2025 11:25

devjiwonchoi added 4 commits January 21, 2025 03:05

[DevOverlay] Decouple Error Overlay with DevTools Indicator

dca75ea

unable to do story yet

d74d12a

fix error boundary use component did catch

53225cb

runtime error handler shouldnt be forked

13dbcea

devjiwonchoi mentioned this pull request Jan 20, 2025

Display global-error along dev overlay during development #75101

Merged

devjiwonchoi force-pushed the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch from 5c4368e to 13dbcea Compare January 20, 2025 18:36

gaojude approved these changes Jan 20, 2025

View reviewed changes

packages/next/src/client/components/react-dev-overlay/_experimental/app/react-dev-overlay.tsx Outdated Show resolved Hide resolved

huozhi reviewed Jan 20, 2025

View reviewed changes

packages/next/src/client/components/react-dev-overlay/_experimental/app/error-boundary.tsx Outdated Show resolved Hide resolved

devjiwonchoi and others added 2 commits January 21, 2025 11:30

rename as DevToolsErrorBoundary

ef75f37

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

pass children only to the boundary

22d1e8a

Co-authored-by: Jude Gao <jude.gao@vercel.com>

devjiwonchoi requested a review from huozhi January 21, 2025 02:51

devjiwonchoi merged commit 352c315 into canary Jan 21, 2025
131 checks passed

devjiwonchoi deleted the 01-17-_devoverlay_decouple_error_overlay_with_devtools_indicator branch January 21, 2025 04:01

devjiwonchoi mentioned this pull request Jan 22, 2025

[DevOverlay] Enable reactOwnerStack when newDevOverlay is enabled #75199

Merged

devjiwonchoi mentioned this pull request Jan 28, 2025

[DevOverlay] Remove unused props from errors.tsx and its story #75392

Merged

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevOverlay] Decouple Error Overlay with DevTools Indicator #74999

[DevOverlay] Decouple Error Overlay with DevTools Indicator #74999

devjiwonchoi commented Jan 16, 2025 •

edited

Loading

devjiwonchoi commented Jan 16, 2025 •

edited

Loading

ijjk commented Jan 17, 2025 •

edited

Loading

ijjk commented Jan 17, 2025 •

edited

Loading

gaojude left a comment

devjiwonchoi commented Jan 21, 2025 •

edited

Loading

[DevOverlay] Decouple Error Overlay with DevTools Indicator #74999

[DevOverlay] Decouple Error Overlay with DevTools Indicator #74999

Conversation

devjiwonchoi commented Jan 16, 2025 • edited Loading

Why?

How?

Before

After

devjiwonchoi commented Jan 16, 2025 • edited Loading

ijjk commented Jan 17, 2025 • edited Loading

Stats from current PR

ijjk commented Jan 17, 2025 • edited Loading

Tests Passed

gaojude left a comment

Choose a reason for hiding this comment

devjiwonchoi commented Jan 21, 2025 • edited Loading

Merge activity

devjiwonchoi commented Jan 16, 2025 •

edited

Loading

devjiwonchoi commented Jan 16, 2025 •

edited

Loading

ijjk commented Jan 17, 2025 •

edited

Loading

ijjk commented Jan 17, 2025 •

edited

Loading

devjiwonchoi commented Jan 21, 2025 •

edited

Loading