feat(nuxt): enable dragging and minimizing for error overlay #33695

Ragura · 2025-11-11T16:55:06Z

🔗 Linked issue

resolves #33659

📚 Description

First Nuxt contribution, fingers crossed!

This PR adds dragging and minimizing to the Error Overlay added in Nuxt 4.2. Dragging snaps around the edges and the PiP window's position is stored via localstorage.

The window can be "closed", which will minimize it into a small pill-shaped non-intrusive button to reopen it. This preference is also stored in localstorage.

I didn't know how to write an actual test for this, but I'm willing to put effort into it with some guidance!

In the meanwhile, testing this is simple: throw an error in the playground app.vue and try dragging the pip window around!

bolt-new-by-stackblitz · 2025-11-11T16:55:09Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-11-11T17:01:46Z

Walkthrough

Reworks the Nuxt error overlay UI and runtime utilities to add an edge-based docking system, draggable Pip and Preview, and persistent dock/hidden state via storage sync. Introduces new DOM controls (pip-close, pip-restore), replaces the toggle button with a custom toggle element, and reorders shadow DOM appends to satisfy adjacency rules. Adds CSS custom properties for dock offsets and transform-origin, viewport-clamping and snapping logic, unified repaint on resize/scroll, pointer-event drag handlers, and live preview snapshot update logic. No exported/public function signatures were changed.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45–60 minutes

Docking, clamping and edge-nearest snapping logic across viewport sizes
Pointer-event drag start/move/end handlers and state transitions for Pip and Preview
Persistence and storage-sync interactions (localStorage + postMessage bridge)
CSS custom properties and transform-origin calculations affecting layout and animations
DOM reordering and new elements (#pip-close, #pip-restore, custom toggle) and ARIA/state updates

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarises the main changes in the pull request: adding dragging and minimizing functionality to the error overlay.
Description check	✅ Passed	The description is directly related to the changeset, explaining the dragging and minimizing features implemented, localStorage persistence, and how to test.
Linked Issues check	✅ Passed	The PR implements the primary objectives from issue #33659: enabling moving and closing the error overlay, with localStorage persistence for both position and closed state.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to error overlay improvements requested in issue #33659, including dragging, minimizing, edge-snapping, and state persistence.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2a877e7 and 88c64a3.

📒 Files selected for processing (1)

packages/nitro-server/src/runtime/utils/dev.ts (8 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Follow standard TypeScript conventions and best practices

Files:

packages/nitro-server/src/runtime/utils/dev.ts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f9d0e0a and 2a877e7.

📒 Files selected for processing (1)

packages/nitro-server/src/runtime/utils/dev.ts (8 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Follow standard TypeScript conventions and best practices

Files:

packages/nitro-server/src/runtime/utils/dev.ts

packages/nitro-server/src/runtime/utils/dev.ts

pkg-pr-new · 2025-11-11T17:07:05Z

Open in StackBlitz

@nuxt/kit

npm i https://pkg.pr.new/@nuxt/kit@33695

@nuxt/nitro-server

npm i https://pkg.pr.new/@nuxt/nitro-server@33695

nuxt

npm i https://pkg.pr.new/nuxt@33695

@nuxt/rspack-builder

npm i https://pkg.pr.new/@nuxt/rspack-builder@33695

@nuxt/schema

npm i https://pkg.pr.new/@nuxt/schema@33695

@nuxt/vite-builder

npm i https://pkg.pr.new/@nuxt/vite-builder@33695

@nuxt/webpack-builder

npm i https://pkg.pr.new/@nuxt/webpack-builder@33695

commit: 5c808b2

codspeed-hq · 2025-11-11T17:13:35Z

CodSpeed Performance Report

Merging #33695 will not alter performance

_{Comparing Ragura:error-overlay-improvements (5c808b2) with main (5d97498)}

Summary

✅ 10 untouched

danielroe · 2025-12-23T14:27:10Z

I think:

we should be able to hide either error page. (pretty or user-supplied)
the error overlay button should also be draggable and position saved in localstorage
if we have hidden the 'pretty' error page then when we hard refresh, we should not see it - it should auto-minimise based on the value saved in local storage.

… and update positioning

…y logic and grouped related code

…ments

danielroe

thank you ❤️

feat(nuxt): enable dragging and minimizing for error overlay

2a877e7

Ragura requested a review from danielroe as a code owner November 11, 2025 16:55

github-actions bot added 4.x enhancement labels Nov 11, 2025

coderabbitai bot reviewed Nov 11, 2025

View reviewed changes

packages/nitro-server/src/runtime/utils/dev.ts Outdated Show resolved Hide resolved

fix(nuxt): 🐛 remove nested button elements

88c64a3

danielroe added this to the 4.3 milestone Dec 16, 2025

Merge branch 'main' into error-overlay-improvements

e861ce2

Ragura and others added 6 commits December 23, 2025 16:27

fix: 🐛 keep different localstorage states for user-error/pretyy-error…

9bffc10

… and update positioning

refactor(nuxt): add structure to iframe storage bridge and PiP overla…

aa92d99

…y logic and grouped related code

Merge remote-tracking branch 'origin/main' into error-overlay-improve…

ac14483

…ments

fix: use times character rather than x

59689cf

fix: add missing bracket

48c19c0

fix: centre the frame around the button

5c808b2

danielroe approved these changes Dec 23, 2025

View reviewed changes

danielroe merged commit 8b75e46 into nuxt:main Dec 24, 2025
99 of 100 checks passed

github-actions bot mentioned this pull request Dec 23, 2025

v4.3.0 #33894

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(nuxt): enable dragging and minimizing for error overlay #33695

feat(nuxt): enable dragging and minimizing for error overlay #33695

Ragura commented Nov 11, 2025

Uh oh!

bolt-new-by-stackblitz bot commented Nov 11, 2025

Uh oh!

coderabbitai bot commented Nov 11, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

pkg-pr-new bot commented Nov 11, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented Nov 11, 2025 •

edited

Loading

Uh oh!

danielroe commented Dec 23, 2025

Uh oh!

danielroe left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

feat(nuxt): enable dragging and minimizing for error overlay #33695

feat(nuxt): enable dragging and minimizing for error overlay #33695

Conversation

Ragura commented Nov 11, 2025

🔗 Linked issue

📚 Description

Uh oh!

bolt-new-by-stackblitz bot commented Nov 11, 2025

Uh oh!

coderabbitai bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pkg-pr-new bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codspeed-hq bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #33695 will not alter performance

Summary

Uh oh!

danielroe commented Dec 23, 2025

Uh oh!

danielroe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai bot commented Nov 11, 2025 •

edited

Loading

pkg-pr-new bot commented Nov 11, 2025 •

edited

Loading

codspeed-hq bot commented Nov 11, 2025 •

edited

Loading