@samitouri / QOS-React / commits / a34c5dff15

Ignore generic InvalidStateError in View Transitions (#34450)

Fixes #34098. There's an issue in Chrome where the `InvalidStateError` always has the same error message. The spec doesn't specify the error message to use but it's more useful to have a specific one for each case like Safari does. One reason it's better to have a specific error message is because the browser console is not the main surface that people look for errors. Chrome relies on a separate log also in the console. Frameworks has built-in error dialogs that pop up first and that's where you see the error and that dialog can't show something specific. Additionally, these errors can't log something specific to servers in production logging. So this is a bad strategy. It's not good to have those error dialogs pop up for non-actionable errors like when it doesn't start because the document was hidden. Since we don't have more specific information we have no choice but to hide all of them. This includes actionable things like duplicate names (although we also have a React specific warning for that in the common case).

Sebastian Markbåge committed Sep 10, 2025 at 09:07 UTC a34c5dff159a5b546a5b24a93e11102713a7d0ec

1 file changed +7 -14

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

+7 -14

@@ -2046,24 +2046,17 @@ function customizeViewTransitionError(

2046 error.message ===

2047 'Skipping view transition because document visibility state has become hidden.' ||

2048 error.message ===

2049 - 'Skipping view transition because viewport size changed.'

2049 + 'Skipping view transition because viewport size changed.' ||

2050 + // Chrome uses a generic error message instead of specific reasons. It will log a

2051 + // more specific reason in the console but the user might not look there.

2052 + // Some of these errors are important to surface like duplicate name errors but

2053 + // it's too noisy for unactionable cases like the document was hidden. Therefore,

2054 + // we hide all of them and hopefully it surfaces in another browser.

2055 + error.message === 'Transition was aborted because of invalid state'

2056 ) {

2057 // Skip logging this. This is not considered an error.

2058 return null;

2059 }

2054 - if (__DEV__) {

2055 - if (

2056 - error.message === 'Transition was aborted because of invalid state'

2057 - ) {

2058 - // Chrome doesn't include the reason in the message but logs it in the console..

2059 - // Redirect the user to look there.

2060 - // eslint-disable-next-line react-internal/prod-error-codes

2061 - return new Error(

2062 - 'A ViewTransition could not start. See the console for more details.',

2063 - {cause: error},

2064 - );

2065 - }

2066 - }

2060 break;

2061 }

2062 }