[DevOverlay] Add Call Stack #74658

devjiwonchoi · 2025-01-08T19:07:08Z

This PR added style for Call Stack and applied the following:

Changed call stack rendering logic
- Display the stack of the first frame
Removed unused CSS
Ported component CSS from the RuntimeError component to respecting components.

Light

CleanShot.2025-01-09.at.07.18.40.mp4

Dark

CleanShot.2025-01-09.at.07.20.34.mp4

Closes NDX-610

devjiwonchoi · 2025-01-08T19:07:52Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

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

ijjk · 2025-01-08T19:11:10Z

Tests Passed

ijjk · 2025-01-08T19:18:52Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_call_stack	Change
buildDuration	36.6s	32.4s	N/A
buildDurationCached	30.2s	27.1s	N/A
nodeModulesSize	417 MB	417 MB	⚠️ +206 kB
nextStartRea..uration (ms)	942ms	823ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_call_stack	Change
5306-HASH.js gzip	53.3 kB	53.3 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	53 kB	53 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.1 kB	34.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_call_stack	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-09-_devoverlay_add_call_stack	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-09-_devoverlay_add_call_stack	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-09-_devoverlay_add_call_stack	Change
index.html gzip	522 B	521 B	N/A
link.html gzip	538 B	535 B	N/A
withRouter.html gzip	518 B	518 B	✓
Overall change	518 B	518 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_call_stack	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	207 kB	207 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_call_stack	Change
middleware-b..fest.js gzip	671 B	668 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.2 kB	31.2 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 01-09-_devoverlay_add_call_stack	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	367 kB	369 kB	⚠️ +1.41 kB
app-page-exp..prod.js gzip	129 kB	129 kB	✓
app-page-tur..prod.js gzip	142 kB	142 kB	✓
app-page-tur..prod.js gzip	138 kB	138 kB	✓
app-page.run...dev.js gzip	355 kB	357 kB	⚠️ +1.43 kB
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.7 kB	21.7 kB	✓
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	✓
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	✓
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	2.46 MB	2.46 MB	⚠️ +2.83 kB

build cache

	vercel/next.js canary	vercel/next.js 01-09-_devoverlay_add_call_stack	Change
0.pack gzip	2.1 MB	2.09 MB	N/A
index.pack gzip	75.1 kB	74.7 kB	N/A
Overall change	0 B	0 B	✓

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: 7704012

huozhi · 2025-01-10T10:41:10Z

...ponents/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.tsx

+  }, [frames, isIgnoreListOpen])
+
+  return (
+    <div className="error-overlay-call-stack-container">


we'd better give a nextjs prefix for our own components or use data-* attribute to separate them from user's css

AFAIK Shadow DOM encapsulates css

But that's good idea, will follow up!

huozhi · 2025-01-10T10:41:53Z

...ponents/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.tsx

+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.70722 2.39641C8.3167 2.00588 7.68353 2.00588 7.29301 2.39641L4.46978 5.21963L3.93945 5.74996L5.00011 6.81062L5.53044 6.28029L8.00011 3.81062L10.4698 6.28029L11.0001 6.81062L12.0608 5.74996L11.5304 5.21963L8.70722 2.39641ZM5.53044 9.71963L5.00011 9.1893L3.93945 10.25L4.46978 10.7803L7.29301 13.6035C7.68353 13.994 8.3167 13.994 8.70722 13.6035L11.5304 10.7803L12.0608 10.25L11.0001 9.1893L10.4698 9.71963L8.00011 12.1893L5.53044 9.71963Z"


not blocking but feels svg path can be optimized, can bypass some svg optimization tool before adding into code

Will follow up, thanks!

huozhi · 2025-01-10T10:42:19Z

...ponents/react-dev-overlay/_experimental/internal/components/Errors/call-stack/call-stack.tsx

+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+


few unnecessary line breaks?

They are somewhat grouped, but I can just put them in one. Mind if I follow up?

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

...ts/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx

+}
+
+export const CALL_STACK_FRAME_STYLES = css`
+  div[data-nextjs-call-stack-frame] {


why we have div and button both are applied with [data-nextjs-call-stack-frame]

When there is the source to open the editor, it should be clickable, so use the button.
When the button is used, the "text-dragging" experience is not great (maybe it's my CSS skill issue).
So if it is unclickable, used div to preserve the text-dragging experience.

CleanShot.2025-01-09.at.06.52.55.mp4

Let's use div, and to not open the editor it can be controlled by classname and a early break in onClick handler. having different element to vary the behavior is tricky

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

devjiwonchoi marked this pull request as ready for review January 8, 2025 22:27

devjiwonchoi requested review from huozhi, eps1lon and gaojude January 8, 2025 22:29

gaojude approved these changes Jan 8, 2025

View reviewed changes

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 17a0c3b to ff7bc1d Compare January 9, 2025 04:47

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 8c450e6 to 44937e8 Compare January 9, 2025 04:47

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from ff7bc1d to 8ca28ed Compare January 9, 2025 07:24

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 44937e8 to 95a41b2 Compare January 9, 2025 07:25

devjiwonchoi mentioned this pull request Jan 9, 2025

[DevOverlay] Add CodeFrame #74682

Draft

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 8ca28ed to 9c0f59f Compare January 9, 2025 09:40

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 95a41b2 to baab20c Compare January 9, 2025 09:41

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 9c0f59f to 571776d Compare January 9, 2025 13:29

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from baab20c to 5e65707 Compare January 9, 2025 13:29

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 571776d to cd1026d Compare January 9, 2025 15:46

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 5e65707 to 80f0b0f Compare January 9, 2025 15:46

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from cd1026d to 7c3592c Compare January 10, 2025 06:56

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 80f0b0f to 6f128a6 Compare January 10, 2025 06:56

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 7c3592c to 3eed2c6 Compare January 10, 2025 08:13

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 6f128a6 to 55a52d7 Compare January 10, 2025 08:13

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 3eed2c6 to 1d49530 Compare January 10, 2025 08:37

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 55a52d7 to 2bd7bf5 Compare January 10, 2025 08:38

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 1d49530 to 676404c Compare January 10, 2025 08:44

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 2bd7bf5 to 1742596 Compare January 10, 2025 08:44

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 676404c to 9656b7f Compare January 10, 2025 08:53

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 1742596 to c4ff1a3 Compare January 10, 2025 08:53

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 9656b7f to f53a05b Compare January 10, 2025 09:04

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from c4ff1a3 to 38f19e5 Compare January 10, 2025 09:04

eps1lon approved these changes Jan 10, 2025

View reviewed changes

huozhi reviewed Jan 10, 2025

View reviewed changes

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from f53a05b to 40ca927 Compare January 10, 2025 11:57

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 38f19e5 to f680559 Compare January 10, 2025 11:58

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 40ca927 to ad48eba Compare January 10, 2025 12:08

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch 2 times, most recently from f03e22e to 392ed35 Compare January 10, 2025 12:17

huozhi reviewed Jan 10, 2025

View reviewed changes

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 669a4a0 to 10c4476 Compare January 10, 2025 12:32

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 392ed35 to 739008d Compare January 10, 2025 12:33

devjiwonchoi added 5 commits January 10, 2025 22:11

[DevOverlay] Add Call Stack

617d6d9

call stack

018c193

call stack

ab0ece9

call stack frame

bec9b16

styory

7704012

devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 10c4476 to 8eb0b85 Compare January 10, 2025 13:11

devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 739008d to 7704012 Compare January 10, 2025 13:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevOverlay] Add Call Stack #74658

[DevOverlay] Add Call Stack #74658

devjiwonchoi commented Jan 8, 2025 •

edited

Loading

devjiwonchoi commented Jan 8, 2025 •

edited

Loading

ijjk commented Jan 8, 2025 •

edited

Loading

ijjk commented Jan 8, 2025 •

edited

Loading

huozhi Jan 10, 2025

devjiwonchoi Jan 10, 2025

devjiwonchoi Jan 10, 2025

huozhi Jan 10, 2025

devjiwonchoi Jan 10, 2025

huozhi Jan 10, 2025

devjiwonchoi Jan 10, 2025

huozhi Jan 10, 2025

devjiwonchoi Jan 10, 2025

huozhi Jan 10, 2025

[DevOverlay] Add Call Stack #74658

Are you sure you want to change the base?

[DevOverlay] Add Call Stack #74658

Conversation

devjiwonchoi commented Jan 8, 2025 • edited Loading

Light

Dark

devjiwonchoi commented Jan 8, 2025 • edited Loading

ijjk commented Jan 8, 2025 • edited Loading

Tests Passed

ijjk commented Jan 8, 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

Choose a reason for hiding this comment

devjiwonchoi commented Jan 8, 2025 •

edited

Loading

devjiwonchoi commented Jan 8, 2025 •

edited

Loading

ijjk commented Jan 8, 2025 •

edited

Loading

ijjk commented Jan 8, 2025 •

edited

Loading