Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DevOverlay] Add Call Stack #74658

Merged
merged 6 commits into from
Jan 10, 2025
Merged

[DevOverlay] Add Call Stack #74658

merged 6 commits into from
Jan 10, 2025
+500 −364

Conversation

devjiwonchoi
Copy link
Member

@devjiwonchoi devjiwonchoi commented Jan 8, 2025 •
edited
Loading

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

@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jan 8, 2025
This was referenced Jan 8, 2025
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
@devjiwonchoi Graphite App
Copy link
Member Author

devjiwonchoi commented Jan 8, 2025 •
edited
Loading

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

@ijjk
Copy link
Member

ijjk commented Jan 8, 2025 •
edited
Loading

Tests Passed

@ijjk
Copy link
Member

ijjk commented Jan 8, 2025 •
edited
Loading

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 29.6s 23.5s N/A
buildDurationCached 27.7s 24.2s N/A
nodeModulesSize 417 MB 417 MB ⚠️ +152 kB
nextStartRea..uration (ms) 880ms 792ms 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 242 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 669 B 667 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 368 kB 369 kB ⚠️ +975 B
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 356 kB 357 kB ⚠️ +1.01 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 ⚠️ +1.98 kB
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js 01-09-_devoverlay_add_call_stack Change
0.pack gzip 2.09 MB 2.09 MB ⚠️ +2.71 kB
index.pack gzip 75.7 kB 75 kB N/A
Overall change 2.09 MB 2.09 MB ⚠️ +2.71 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: ff163df

@devjiwonchoi devjiwonchoi marked this pull request as ready for review January 8, 2025 22:27
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 17a0c3b to ff7bc1d Compare January 9, 2025 04:47
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 8c450e6 to 44937e8 Compare January 9, 2025 04:47
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from ff7bc1d to 8ca28ed Compare January 9, 2025 07:24
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 44937e8 to 95a41b2 Compare January 9, 2025 07:25
@devjiwonchoi devjiwonchoi mentioned this pull request Jan 9, 2025
Merged
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 8ca28ed to 9c0f59f Compare January 9, 2025 09:40
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 95a41b2 to baab20c Compare January 9, 2025 09:41
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 9c0f59f to 571776d Compare January 9, 2025 13:29
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from baab20c to 5e65707 Compare January 9, 2025 13:29
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 571776d to cd1026d Compare January 9, 2025 15:46
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from f03e22e to 392ed35 Compare January 10, 2025 12:17
huozhi
huozhi reviewed Jan 10, 2025
View reviewed changes
...ts/react-dev-overlay/_experimental/internal/components/call-stack-frame/call-stack-frame.tsx Outdated
}

export const CALL_STACK_FRAME_STYLES = css`
div[data-nextjs-call-stack-frame] {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK div opens up accessibility hell when it needs to be clickable.

@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 669a4a0 to 10c4476 Compare January 10, 2025 12:32
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 392ed35 to 739008d Compare January 10, 2025 12:33
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 10c4476 to 8eb0b85 Compare January 10, 2025 13:11
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 739008d to 7704012 Compare January 10, 2025 13:12
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from 8eb0b85 to f2dadb8 Compare January 10, 2025 14:22
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 7704012 to b7b2ed4 Compare January 10, 2025 14:23
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from f2dadb8 to d5bad0c Compare January 10, 2025 14:23
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from b7b2ed4 to 97035d8 Compare January 10, 2025 14:24
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from d5bad0c to d0c51e6 Compare January 10, 2025 14:41
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 97035d8 to 380425c Compare January 10, 2025 14:41
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch from d0c51e6 to 0667567 Compare January 10, 2025 15:55
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from 39f416b to ff163df Compare January 10, 2025 15:56
@devjiwonchoi devjiwonchoi force-pushed the 01-08-_devoverlay_apply_turbopack_styling branch 2 times, most recently from 6773b2a to 4b25341 Compare January 10, 2025 17:10
Base automatically changed from 01-08-_devoverlay_apply_turbopack_styling to canary January 10, 2025 17:10
devjiwonchoi and others added 6 commits January 10, 2025 17:11
@devjiwonchoi
[DevOverlay] Add Call Stack
0088286
@devjiwonchoi
call stack
6c87442
@devjiwonchoi
call stack
9d2f20b
@devjiwonchoi
call stack frame

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
b5c98bc
@devjiwonchoi
styory
f9d8d79
@huozhi @devjiwonchoi
unify element
c159544
@devjiwonchoi devjiwonchoi force-pushed the 01-09-_devoverlay_add_call_stack branch from ff163df to c159544 Compare January 10, 2025 17:11
@devjiwonchoi devjiwonchoi merged commit 121fb9f into canary Jan 10, 2025
13 of 18 checks passed
@devjiwonchoi devjiwonchoi deleted the 01-09-_devoverlay_add_call_stack branch January 10, 2025 17:11
@devjiwonchoi Graphite App
Copy link
Member Author

Merge activity

  • Jan 10, 12:12 PM EST: Graphite couldn't merge this PR because it failed for an unknown reason.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 25, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@huozhi huozhi

@eps1lon eps1lon

@gaojude gaojude

Assignees
No one assigned
Labels
created-by: Next.js team PRs by the Next.js team. locked type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@devjiwonchoi @ijjk @huozhi @eps1lon @gaojude