[dev-overlay] add error env name label #76003

devjiwonchoi · 2025-02-13T14:42:29Z

This PR moved the [ {envName} ] to a separate label chip at the header for better indication and visibility. Also, slightly changed the label colors.

--------	Before	After
Light
Dark

Closes NDX-754

devjiwonchoi · 2025-02-13T14:42:57Z

[dev-overlay] add error env name label #76003 👈 (View in Graphite)
[dev-overlay] update overlay toolbar icons #75998
[dev-overlay] sync style diffs with new design #75949
canary

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

ijjk · 2025-02-13T14:49:14Z

Tests Passed

ijjk · 2025-02-13T15:05:51Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 02-13-_dev-overlay_add_error_env_name_label	Change
buildDuration	18.1s	16.9s	N/A
buildDurationCached	15.8s	13.6s	N/A
nodeModulesSize	393 MB	393 MB	⚠️ +57.5 kB
nextStartRea..uration (ms)	438ms	441ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 02-13-_dev-overlay_add_error_env_name_label	Change
5306-HASH.js gzip	55.2 kB	55.3 kB	⚠️ +123 B
7048.HASH.js gzip	168 B	168 B	✓
8377-HASH.js gzip	5.46 kB	5.46 kB	N/A
bccd1874-HASH.js gzip	53 kB	53 kB	✓
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	245 B	245 B	✓
main-HASH.js gzip	34.9 kB	34.9 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	✓
Overall change	110 kB	110 kB	⚠️ +123 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 02-13-_dev-overlay_add_error_env_name_label	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 02-13-_dev-overlay_add_error_env_name_label	Change
_app-HASH.js gzip	194 B	194 B	✓
_error-HASH.js gzip	193 B	192 B	N/A
amp-HASH.js gzip	513 B	511 B	N/A
css-HASH.js gzip	342 B	342 B	✓
dynamic-HASH.js gzip	1.84 kB	1.84 kB	N/A
edge-ssr-HASH.js gzip	265 B	264 B	N/A
head-HASH.js gzip	363 B	360 B	N/A
hooks-HASH.js gzip	393 B	390 B	N/A
image-HASH.js gzip	4.59 kB	4.59 kB	N/A
index-HASH.js gzip	268 B	266 B	N/A
link-HASH.js gzip	2.35 kB	2.35 kB	✓
routerDirect..HASH.js gzip	327 B	326 B	N/A
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	325 B	325 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.72 kB	3.72 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js 02-13-_dev-overlay_add_error_env_name_label	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 02-13-_dev-overlay_add_error_env_name_label	Change
index.html gzip	523 B	521 B	N/A
link.html gzip	539 B	535 B	N/A
withRouter.html gzip	520 B	517 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 02-13-_dev-overlay_add_error_env_name_label	Change
edge-ssr.js gzip	130 kB	130 kB	N/A
page.js gzip	211 kB	211 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 02-13-_dev-overlay_add_error_env_name_label	Change
middleware-b..fest.js gzip	675 B	672 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.4 kB	31.4 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 02-13-_dev-overlay_add_error_env_name_label	Change
app-page-exp...dev.js gzip	395 kB	395 kB	⚠️ +285 B
app-page-exp..prod.js gzip	133 kB	133 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	384 kB	384 kB	⚠️ +288 B
app-page.run..prod.js gzip	129 kB	129 kB	✓
app-route-ex...dev.js gzip	39.4 kB	39.4 kB	✓
app-route-ex..prod.js gzip	25.7 kB	25.7 kB	✓
app-route-tu..prod.js gzip	25.7 kB	25.7 kB	✓
app-route-tu..prod.js gzip	25.5 kB	25.5 kB	✓
app-route.ru...dev.js gzip	39.1 kB	39.1 kB	✓
app-route.ru..prod.js gzip	25.5 kB	25.5 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.72 kB	9.72 kB	✓
pages-api.ru...dev.js gzip	11.8 kB	11.8 kB	✓
pages-api.ru..prod.js gzip	9.72 kB	9.72 kB	✓
pages-turbo...prod.js gzip	22 kB	22 kB	✓
pages.runtim...dev.js gzip	31.6 kB	31.6 kB	✓
pages.runtim..prod.js gzip	22 kB	22 kB	✓
server.runti..prod.js gzip	61.2 kB	61.2 kB	✓
Overall change	1.68 MB	1.68 MB	⚠️ +573 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 02-13-_dev-overlay_add_error_env_name_label	Change
0.pack gzip	2.12 MB	2.12 MB	⚠️ +2.85 kB
index.pack gzip	76.8 kB	75.7 kB	N/A
Overall change	2.12 MB	2.12 MB	⚠️ +2.85 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.runtime.dev.js

Diff too large to display

Commit: 6c7d14a

packages/next/src/client/components/errors/use-error-handler.ts

...elopment/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts

packages/next/src/client/lib/console.ts

packages/next/src/client/components/errors/use-error-handler.ts

huozhi · 2025-02-13T23:14:53Z

packages/next/src/client/lib/console.ts

@@ -109,3 +111,44 @@ export function formatConsoleArgs(args: unknown[]): string {

  return result
 }
+
+// TODO: Infer type for `environmentName` if available.
+export function parseConsoleArgs(args: unknown[]): {


let's call it parseReplayedError.

Technically it's not only for replayed error isn't it?

We call it with any console args in the current factoring as far as I can tell. So parseReplayedError is misleading since it still needs to handle non-replayed console.error.

yea fair, but parseConsoleArgs is also too general that we're trying to parse the replayed error format here. still open to rename it later

packages/next/src/client/lib/console.ts

...erlay/_experimental/internal/components/errors/error-overlay-layout/error-overlay-layout.tsx

huozhi · 2025-02-13T23:21:20Z

...elopment/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts

+           4 | }
+           5 |",
+           "title": "Console Error
+         Server",


This badge need to be a snapshot in the redbox result, we can't mix it into the title property, it's misleading that "Server" is part of the title. We need to create a new util to locate the badge and read the text

Suggested change

Server",

Server",

The title became the badges in the new overlay. I agree that we need to change related attributes and naming.
Can we do that in a follow-up?

Can stay for now until I finish the toDisplayRedbox matcher.

Will be a different field in the new Redbox snapshot matchers: #73621

huozhi · 2025-02-13T23:21:50Z

...elopment/app-dir/capture-console-error-owner-stack/capture-console-error-owner-stack.test.ts

+        `)
+      } else {
+        expect(result).toMatchInlineSnapshot(`
+         {


the two snapshots are identical, they can be merged

I just forked current testing instead of merging to prevent adding back if-else due to possible divergence between webpack and turbopack snapshots.

IMO the merging should be done separately.

If it's the same, it shouldn't fork. We want to get rid of any divergence between bundlers so any fork stands out and isn't easy to scan for if it really does fork.

huozhi · 2025-02-13T23:22:57Z

test/e2e/app-dir/use-cache-hanging-inputs/use-cache-hanging-inputs.test.ts

+        if (isNewDevOverlay) {
+          expect({ count, title, description }).toEqual({
+            count: 1,
+            title: 'Unhandled Runtime Error\nCache',


same here, the badge should be a new property, otherwise it looks like the error.message is 'Unhandled Runtime Error\nCache'

Same as #76003 (comment)

vercel · 2025-02-14T22:11:40Z

Notifying the following users due to files changed in this PR based on this repo's notify modifiers:

@timneutkens, @ijjk, @shuding, @huozhi:

packages/next/src/server/config.ts

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

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

devjiwonchoi mentioned this pull request Feb 13, 2025

[dev-overlay] sync style diffs with new design #75949

Merged

devjiwonchoi mentioned this pull request Feb 13, 2025

[dev-overlay] update overlay toolbar icons #75998

Merged

devjiwonchoi force-pushed the 02-13-_dev-overlay_add_error_env_name_label branch from 678a902 to 73b87b0 Compare February 13, 2025 16:37

devjiwonchoi force-pushed the 02-13-_dev-overlay_update_nodejs_inspector_icon branch from 73cdf9d to 4037c59 Compare February 13, 2025 16:37

ijjk added the tests label Feb 13, 2025

devjiwonchoi changed the base branch from 02-13-_dev-overlay_update_nodejs_inspector_icon to graphite-base/76003 February 13, 2025 17:23

devjiwonchoi force-pushed the 02-13-_dev-overlay_add_error_env_name_label branch from 250a4b1 to da7eb60 Compare February 13, 2025 17:40

devjiwonchoi force-pushed the graphite-base/76003 branch from 4037c59 to 9e19ab7 Compare February 13, 2025 17:40

devjiwonchoi force-pushed the 02-13-_dev-overlay_add_error_env_name_label branch from da7eb60 to 0ee93c0 Compare February 13, 2025 17:43

devjiwonchoi force-pushed the graphite-base/76003 branch from 9e19ab7 to a2f52ed Compare February 13, 2025 17:43

devjiwonchoi changed the base branch from graphite-base/76003 to canary February 13, 2025 17:43

devjiwonchoi marked this pull request as ready for review February 13, 2025 19:19

devjiwonchoi requested review from huozhi and eps1lon February 13, 2025 19:19

huozhi reviewed Feb 13, 2025

View reviewed changes

devjiwonchoi force-pushed the 02-13-_dev-overlay_add_error_env_name_label branch 5 times, most recently from 35dd753 to 472ccef Compare February 13, 2025 21:39

devjiwonchoi requested review from huozhi, ztanner and gaojude February 13, 2025 22:35

huozhi reviewed Feb 13, 2025

View reviewed changes

devjiwonchoi requested a review from huozhi February 14, 2025 15:45

devjiwonchoi force-pushed the 02-13-_dev-overlay_add_error_env_name_label branch 3 times, most recently from 36f2756 to 7ba46ad Compare February 14, 2025 22:11

ijjk added create-next-app Related to our CLI tool for quickly starting a new Next.js application. examples Issue was opened via the examples template. labels Feb 14, 2025

devjiwonchoi force-pushed the 02-13-_dev-overlay_add_error_env_name_label branch from 7ba46ad to e5da966 Compare February 14, 2025 22:12

devjiwonchoi removed examples Issue was opened via the examples template. create-next-app Related to our CLI tool for quickly starting a new Next.js application. labels Feb 14, 2025

devjiwonchoi force-pushed the 02-13-_dev-overlay_add_error_env_name_label branch from e5da966 to ff89614 Compare February 14, 2025 22:14

devjiwonchoi and others added 11 commits February 15, 2025 08:28

[dev-overlay] add error env name label

8e4490a

fix: slice only if env name exists

ae0e08f

merge parseEnvironmentName and matchReplayedError

73a70ce

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

update test [ Server ]

4520ecc

update tetss

a1a8b6f

update test use-cache-hanging-inputs

3dd6e52

remove todo

84fc26c

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

remove irrelavent comment

30dbed1

use isNewDevOverlay

c81d133

update use single parseConsoleArgs

d125edb

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

decouple formatting

bf1c999

devjiwonchoi force-pushed the 02-13-_dev-overlay_add_error_env_name_label branch 2 times, most recently from a2d23d2 to bf1c999 Compare February 14, 2025 23:49

devjiwonchoi added 2 commits February 15, 2025 08:50

add isNewDevOverlay back

53bb596

don't fully fork if same snapshot

6c7d14a

huozhi approved these changes Feb 16, 2025

View reviewed changes

devjiwonchoi merged commit 0a4cc0a into canary Feb 17, 2025
133 checks passed

devjiwonchoi deleted the 02-13-_dev-overlay_add_error_env_name_label branch February 17, 2025 07:05

unstubbable pushed a commit that referenced this pull request Feb 17, 2025

[dev-overlay] add error env name label (#76003)

7ca9c90

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dev-overlay] add error env name label #76003

[dev-overlay] add error env name label #76003

devjiwonchoi commented Feb 13, 2025 •

edited

Loading

devjiwonchoi commented Feb 13, 2025 •

edited

Loading

ijjk commented Feb 13, 2025 •

edited

Loading

ijjk commented Feb 13, 2025 •

edited

Loading

huozhi Feb 13, 2025

devjiwonchoi Feb 14, 2025

eps1lon Feb 14, 2025

huozhi Feb 16, 2025

huozhi Feb 13, 2025

devjiwonchoi Feb 14, 2025

eps1lon Feb 14, 2025

eps1lon Feb 18, 2025

huozhi Feb 13, 2025

devjiwonchoi Feb 14, 2025 •

edited

Loading

eps1lon Feb 14, 2025

huozhi Feb 13, 2025

devjiwonchoi Feb 14, 2025

vercel bot commented Feb 14, 2025

[dev-overlay] add error env name label #76003

[dev-overlay] add error env name label #76003

Conversation

devjiwonchoi commented Feb 13, 2025 • edited Loading

devjiwonchoi commented Feb 13, 2025 • edited Loading

ijjk commented Feb 13, 2025 • edited Loading

Tests Passed

ijjk commented Feb 13, 2025 • edited Loading

Stats from current PR

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

devjiwonchoi Feb 14, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Feb 14, 2025

devjiwonchoi commented Feb 13, 2025 •

edited

Loading

devjiwonchoi commented Feb 13, 2025 •

edited

Loading

ijjk commented Feb 13, 2025 •

edited

Loading

ijjk commented Feb 13, 2025 •

edited

Loading

devjiwonchoi Feb 14, 2025 •

edited

Loading