[dev-overlay] Fix error dialog resizing logic#77830
Merged
Merged
Conversation
raunofreiberg
commented
Apr 4, 2025
Comment on lines
-92
to
-103
| useEffect(() => { | ||
| // Close the error overlay when pressing escape | ||
| function handleKeyDown(event: KeyboardEvent) { | ||
| if (event.key === 'Escape') { | ||
| onClose() | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener('keydown', handleKeyDown) | ||
| return () => document.removeEventListener('keydown', handleKeyDown) | ||
| }, [onClose]) | ||
|
|
Member
Author
There was a problem hiding this comment.
This is already handled by the Dialog component. The logic here was also making the dialog dismiss when closing the Dev Tools popover with Escape
raunofreiberg
commented
Apr 4, 2025
| </DialogContent> | ||
| <ErrorOverlayBottomStack | ||
| errorCount={runtimeErrors?.length ?? 0} | ||
| errorCount={errorCount} |
Member
Author
There was a problem hiding this comment.
Using the same errorCount variable as introduced in #77821
Member
Tests Passed |
devjiwonchoi
approved these changes
Apr 4, 2025
huozhi
added a commit
that referenced
this pull request
Apr 4, 2025
Reverts #77830 This was breaking the react 18.3 tests, where the toggling stack frames is not working in 18.3. Possibly broken by the ref related changes. x-ref: https://github.com/vercel/next.js/actions/runs/14274082641/job/40015934515
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR improves our height resizing strategy. Animating the height on page load or when the dialog opens is not ideal and it would be better if the dialog would just fade in and assume it's intrinsic height without motion.
This is what happens before this PR when you open errors, and it can be distracting to experience such amount of motion at once:
CleanShot.2025-04-04.at.14.10.28.mp4
The reason this happens is because some of the dialog contents load in async—for example the errors are actually suspended so that the message can be viewed without waiting for the stack frames to load:
next.js/packages/next/src/client/components/react-dev-overlay/ui/container/errors.tsx
Lines 202 to 208 in 1751db0
After this PR, we still measure the
heightof the dialog and animate it in response to user input, but only use the value when the height has stabilised. You can see what happens by observing the blue height value:CleanShot.2025-04-04.at.14.28.19.mp4
And another video from the fixture app:
CleanShot.2025-04-04.at.15.50.16.mp4
Closes NDX-983