fix(nuxt): finish view transition on app error instead of aborting #33723

Flo0806 · 2025-11-17T17:12:04Z

🔗 Linked issue

📚 Description

When navigating to non-existent routes with viewTransition enabled, the transition was being aborted on app:error, causing a significant delay (several seconds) before the error page could render.

This changes the behavior to finish the transition smoothly instead of aborting it, allowing immediate and smooth animation to the error page while maintaining the visual transition effect.

The fix makes sense - by calling finishTransition() instead of abortTransition() on the app:error hook, you allow the View Transition API to complete gracefully and animate to the error page, rather than aborting mid-transition which causes the hang/delay.

…uxt#32721)

bolt-new-by-stackblitz · 2025-11-17T17:12:08Z

Run & review this pull request in StackBlitz Codeflow.

pkg-pr-new · 2025-11-17T17:15:19Z

Open in StackBlitz

@nuxt/kit

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

@nuxt/nitro-server

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

nuxt

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

@nuxt/rspack-builder

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

@nuxt/schema

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

@nuxt/vite-builder

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

@nuxt/webpack-builder

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

commit: 0922cc2

coderabbitai · 2025-11-17T17:15:36Z

Walkthrough

The view-transitions client plugin was modified: the vue:error hook no longer calls abortTransition and now calls finishTransition while preserving resetTransitionState. A new app:error hook was added that also calls finishTransition and resetTransitionState, ensuring transitions are finished and state reset for application-level errors. Existing page:finish and resetTransitionState behaviour for other flows remains unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Single-file change with a focused replacement and a new hook.
Simple control-flow edits around transition completion and state reset.
Pay attention to:
- The change from abortTransition to finishTransition in vue:error to ensure it matches intended UX for error flows.
- Interaction between the new app:error hook and existing page:finish / resetTransitionState behaviour.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: replacing abortTransition with finishTransition on app error in view transitions.
Description check	✅ Passed	The description is directly related to the changeset, explaining the problem (delay on error pages with viewTransition) and the solution (finishing instead of aborting transitions).
Linked Issues check	✅ Passed	The code change directly addresses the linked issue #32721 by replacing abortTransition with finishTransition on app:error, eliminating the multi-second delay when rendering error pages with viewTransition enabled.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to the view-transitions plugin, modifying only the error handling behaviour to address the linked issue without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 a98aa1c and 0922cc2.

📒 Files selected for processing (1)

packages/nuxt/src/app/plugins/view-transitions.client.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: spam-detection
GitHub Check: code
GitHub Check: build

🔇 Additional comments (2)

packages/nuxt/src/app/plugins/view-transitions.client.ts (2)

65-68: LGTM! Consistent with PR objective and past discussion.

The change from abortTransition to finishTransition correctly addresses the multi-second delay issue. Finishing the transition allows the View Transition API to complete gracefully, enabling smooth animation to the error page rather than an abrupt abort that causes the delay. This aligns with the discussion in past review comments about providing a consistent UI experience.

Based on past review comments.

70-74: LGTM! Correctly handles application-level errors.

The addition of the app:error hook ensures that application-level errors (e.g. navigation to non-existent routes) also finish the transition gracefully. This complements the vue:error hook and ensures consistent behaviour across different error types. The inline comment helpfully documents the rationale.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

Provide your own instructions using the high_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

📝 Description — Summarize the main change in 50–60 words, explaining what was done.

📓 References — List relevant issues, discussions, documentation, or related PRs.

📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.

📊 Contributor Summary — Include a Markdown table showing contributions:
| Contributor | Lines Added | Lines Removed | Files Changed |

✔️ Additional Notes — Add any extra reviewer context.
Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

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.}

codspeed-hq · 2025-11-17T17:23:48Z

CodSpeed Performance Report

Merging #33723 will degrade performances by 12.65%

_{Comparing Flo0806:fix/view-transition-error-page-delay (0922cc2) with main (ffa14fe)}

Summary

❌ 1 regression
✅ 9 untouched

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

	Benchmark	`BASE`	`HEAD`	Change
❌	`writeTypes in the basic-types fixture`	80.2 ms	91.8 ms	-12.65%

danielroe · 2025-11-17T20:49:53Z

packages/nuxt/src/app/plugins/view-transitions.client.ts


+  nuxtApp.hook('app:error', () => {
+    // Finish the transition instead of aborting to allow smooth animation to error page
+    finishTransition?.()


should we do:

Suggested change

finishTransition?.()

abortTransition?.()

...or, alternatively, should we call finishTransition within vue:error as well?

I understand the change; that was my first solution. But if I intentionally chose Transition, wouldn't I also want the transition to my error page to be animated?
That was the reason why I was using finishTransition

Edit: Therefore, I would tend to use finishTransition in vue:error as well. As I said, if I want a nice transition, it shouldn't stop at the error page, especially if you want to provide a consistent UI experience.

I changed abortTransition to finishTransition in vue:error as well. If you still prefer to set both to abortTransition, then that's of course also ok for me!

fix(nuxt): finish view transition on app error instead of aborting (n…

a98aa1c

…uxt#32721)

Flo0806 requested a review from danielroe as a code owner November 17, 2025 17:12

github-actions bot added 4.x bug labels Nov 17, 2025

danielroe reviewed Nov 17, 2025

View reviewed changes

fix(nuxt): change abort transition to finish transition

0922cc2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(nuxt): finish view transition on app error instead of aborting #33723

fix(nuxt): finish view transition on app error instead of aborting #33723

Uh oh!

Flo0806 commented Nov 17, 2025

Uh oh!

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

Uh oh!

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

edited

Loading

Uh oh!

coderabbitai bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

codspeed-hq bot commented Nov 17, 2025 •

edited

Loading

Uh oh!

danielroe Nov 17, 2025 •

edited

Loading

Uh oh!

Flo0806 Nov 17, 2025 •

edited

Loading

Uh oh!

Flo0806 Nov 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(nuxt): finish view transition on app error instead of aborting #33723

Are you sure you want to change the base?

fix(nuxt): finish view transition on app error instead of aborting #33723

Uh oh!

Conversation

Flo0806 commented Nov 17, 2025

🔗 Linked issue

📚 Description

Uh oh!

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

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai bot commented Nov 17, 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!

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

Uh oh!

CodSpeed Performance Report

Merging #33723 will degrade performances by 12.65%

Summary

Benchmarks breakdown

Uh oh!

danielroe Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Flo0806 Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Flo0806 Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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

edited

Loading

coderabbitai bot commented Nov 17, 2025 •

edited

Loading

codspeed-hq bot commented Nov 17, 2025 •

edited

Loading

danielroe Nov 17, 2025 •

edited

Loading

Flo0806 Nov 17, 2025 •

edited

Loading