Repository navigation
fix(nuxt): handle rejected promise in view transition abort - #34515
Conversation
@nuxt/kit
@nuxt/nitro-server
nuxt
@nuxt/rspack-builder
@nuxt/schema
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughThe plugin's view-transition completion handling was modified: the promise chain on 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/nuxt/src/app/plugins/view-transitions.client.ts (1)
96-96: Consider using.finally()for cleaner cleanup semantics.The fix correctly addresses the unhandled promise rejection. Since
resetTransitionStateis idempotent cleanup that should run regardless of outcome,.finally()would be slightly more idiomatic:- transition.finished.then(resetTransitionState).catch(resetTransitionState) + transition.finished.finally(resetTransitionState)Any browser supporting
document.startViewTransitionwill support.finally(). This is purely a stylistic preference — the current approach works correctly.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/nuxt/src/app/plugins/view-transitions.client.ts` at line 96, Replace the promise handling on transition.finished to use .finally() for cleanup: instead of calling transition.finished.then(resetTransitionState).catch(resetTransitionState), call transition.finished.finally(resetTransitionState) so the idempotent cleanup function resetTransitionState always runs once after the promise settles; locate the call where transition.finished is used (inside the document.startViewTransition handling) and update it to .finally(resetTransitionState).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/nuxt/src/app/plugins/view-transitions.client.ts`:
- Line 96: Replace the promise handling on transition.finished to use .finally()
for cleanup: instead of calling
transition.finished.then(resetTransitionState).catch(resetTransitionState), call
transition.finished.finally(resetTransitionState) so the idempotent cleanup
function resetTransitionState always runs once after the promise settles; locate
the call where transition.finished is used (inside the
document.startViewTransition handling) and update it to
.finally(resetTransitionState).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 8ad53fe9-aa4c-4a7f-9c32-11292cc03dbc
📒 Files selected for processing (1)
packages/nuxt/src/app/plugins/view-transitions.client.ts
Merging this PR will improve performance by 14.54%
|
Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Daniel Roe <daniel@roe.dev>

When a view transition gets aborted (navigation error, app error, or Vue error), the error handlers call
abortTransition()which rejects the update callback's promise. This causestransition.finishedto reject too, but.then(resetTransitionState)only attached a resolve handler - the derived promise rejected with no catch, producing an unhandled promise rejection warning in the browser console.Added
.catch(resetTransitionState)so rejections run the same idempotent cleanup. The error handlers already deal with the actual error; this just prevents the stray rejection.Repro: enable
experimental.viewTransition, trigger a navigation error (e.g. a middleware that throws) while a view transition is in progress.