Skip to content

View Transitions: Fix InvalidStateError on bfcache navigations#2438

Merged
westonruter merged 3 commits intotrunkfrom
fix/view-transitions-invalid-state-error
Apr 7, 2026
Merged

View Transitions: Fix InvalidStateError on bfcache navigations#2438
westonruter merged 3 commits intotrunkfrom
fix/view-transitions-invalid-state-error

Conversation

@westonruter
Copy link
Copy Markdown
Member

@westonruter westonruter commented Apr 7, 2026

This addresses an issue reported in a support topic.

I was able to reproduce the issue when going back/forward in the browser. I'd see in the console:

Uncaught (in promise) InvalidStateError: Transition was aborted because of invalid state

This goes away with the fix in this PR.

Summary (via Claude Code)

Fixes Uncaught (in promise) InvalidStateError: Transition was aborted because of invalid state errors that occur on every back-forward cache (bfcache) navigation.

Problem

When a user navigates back/forward and the page is restored from the bfcache, the browser still fires pageswap and pagereveal events with a ViewTransition object — however, the transition is immediately skipped because no old-page snapshot is available for a bfcache restoration. This causes the ViewTransition.ready and ViewTransition.finished promises to reject with an InvalidStateError. Since the plugin's event handlers never attached rejection handlers to these promises, the browser reports them as Uncaught (in promise) errors.

This was reported as a significant uptick in Sentry errors, particularly on Chrome 146+ (mobile and desktop), affecting all pages on the site.

Fix

In both the pageswap and pagereveal event handlers, no-op .catch() handlers are attached to event.viewTransition.ready and event.viewTransition.finished immediately — before any other interaction with the transition object. This marks the promises as handled, so when they reject due to an aborted transition (as happens with bfcache restorations), the browser no longer reports unhandled promise rejection errors.

The rest of the handler logic (calling types.add(), setting temporary view transition names) continues to work normally for regular navigations where the transition is valid.

Use of AI Tools

I provided the support topic to Claude Code and it came up with the fix. No error now appears in the console for me.

@westonruter westonruter added this to the view-transitions n.e.x.t milestone Apr 7, 2026
@westonruter westonruter added [Type] Bug An existing feature is broken [Plugin] View Transitions Issues for the View Transitions plugin labels Apr 7, 2026
When a page is restored from the back-forward cache (bfcache), the
browser creates a ViewTransition object on the pageswap/pagereveal
events but immediately skips it since no old-page snapshot is available.
The ViewTransition.ready and ViewTransition.finished promises reject
with "InvalidStateError: Transition was aborted because of invalid
state", reported as "Uncaught (in promise)" since no rejection handler
was attached.

Fix: attach no-op .catch() handlers to both promises at the top of
each event handler to prevent unhandled promise rejections.

See https://wordpress.org/support/topic/invalidstateerror-transition-was-aborted-because-of-invalid-state-wordpress/

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@westonruter westonruter force-pushed the fix/view-transitions-invalid-state-error branch from df37ea2 to 8592afb Compare April 7, 2026 09:40
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 7, 2026

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: mukeshpanchal27 <mukesh27@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@westonruter
Copy link
Copy Markdown
Member Author

westonruter commented Apr 7, 2026

Build for testing: view-transitions.zip view-transitions.zip

Comment thread plugins/view-transitions/js/view-transitions.js Outdated
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>
@westonruter westonruter force-pushed the fix/view-transitions-invalid-state-error branch from 946cbc8 to 5cd3adf Compare April 7, 2026 10:08
@mukeshpanchal27
Copy link
Copy Markdown
Member

@westonruter Just pushed 71557ea that fix JS lint

@westonruter westonruter merged commit 1aedb92 into trunk Apr 7, 2026
11 checks passed
@westonruter westonruter deleted the fix/view-transitions-invalid-state-error branch April 7, 2026 11:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Plugin] View Transitions Issues for the View Transitions plugin [Type] Bug An existing feature is broken

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants