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.

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

a98aa1c

…uxt#32721)

Flo0806 requested a review fromdanielroe as acode owner

November 17, 2025 17:12

Copy link

bolt-new-by-stackblitzbot commentedNov 17, 2025

Run & review this pull request inStackBlitz Codeflow.

github-actionsbot added 4.x bug labels

Nov 17, 2025

Copy link

pkg-pr-newbot commentedNov 17, 2025•
edited
Loading

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

Copy link

coderabbitaibot commentedNov 17, 2025•
edited
Loading

Walkthrough

The view-transitions client plugin was modified: thevue:error hook no longer callsabortTransition and now callsfinishTransition while preservingresetTransitionState. A newapp:error hook was added that also callsfinishTransition andresetTransitionState, ensuring transitions are finished and state reset for application-level errors. Existingpage:finish andresetTransitionState 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 fromabortTransition tofinishTransition invue:error to ensure it matches intended UX for error flows.
- Interaction between the newapp:error hook and existingpage: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 betweena98aa1c and0922cc2.

📒 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 fromabortTransition tofinishTransition 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 theapp:error hook ensures that application-level errors (e.g. navigation to non-existent routes) also finish the transition gracefully. This complements thevue: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 thehigh-level summary in your pull requests — including its content, structure, tone, and formatting.

Provide your own instructions using thehigh_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Usehigh_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 usingCodeRabbit! 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.}

Copy link

codspeed-hqbot commentedNov 17, 2025•
edited
Loading

CodSpeed Performance Report

Merging#33723 willdegrade performances by 12.65%

_{ComparingFlo0806:fix/view-transition-error-page-delay (0922cc2) withmain (ffa14fe)}

Summary

❌ 1 regression
✅ 9 untouched

⚠️Please fix the performance issues oracknowledge them on CodSpeed.

Benchmarks breakdown

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

danielroe reviewed

Nov 17, 2025

View reviewed changes

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?.()

Copy link

Member

danielroeNov 17, 2025•
edited
Loading

Choose a reason for hiding this comment

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

should we do:

Suggested change

	finishTransition?.()
	abortTransition?.()

...or, alternatively, should we callfinishTransition withinvue:error as well?

Copy link

CollaboratorAuthor

Flo0806Nov 17, 2025•
edited
Loading

Choose a reason for hiding this comment

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

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 usingfinishTransition

Edit: Therefore, I would tend to usefinishTransition invue: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.

Copy link

CollaboratorAuthor

Flo0806Nov 19, 2025

Choose a reason for hiding this comment

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

I changedabortTransition tofinishTransition invue:error as well. If you still prefer to set both toabortTransition, then that's of course also ok for me!

fix(nuxt): change abort transition to finish transition

0922cc2

Labels

4.x bug

Movatterモバイル変換

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

Conversation

Flo0806 commentedNov 17, 2025

🔗 Linked issue

📚 Description

Uh oh!

bolt-new-by-stackblitzbot commentedNov 17, 2025

Uh oh!

pkg-pr-newbot commentedNov 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Uh oh!

coderabbitaibot commentedNov 17, 2025• editedLoading 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-hqbot commentedNov 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging#33723 willdegrade performances by 12.65%

Summary

Benchmarks breakdown

Uh oh!

danielroeNov 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Flo0806Nov 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Flo0806Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pkg-pr-newbot commentedNov 17, 2025•
edited
Loading

coderabbitaibot commentedNov 17, 2025•
edited
Loading

codspeed-hqbot commentedNov 17, 2025•
edited
Loading

danielroeNov 17, 2025•
edited
Loading

Flo0806Nov 17, 2025•
edited
Loading