Skip to content

Commit a34c5df

Browse files
authored
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).
1 parent 3bf8ab4 commit a34c5df

File tree

1 file changed

+7
-14
lines changed

1 file changed

+7
-14
lines changed

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

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2046,24 +2046,17 @@ function customizeViewTransitionError(
20462046
error.message ===
20472047
'Skipping view transition because document visibility state has become hidden.' ||
20482048
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'
20502056
) {
20512057
// Skip logging this. This is not considered an error.
20522058
return null;
20532059
}
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-
}
20672060
break;
20682061
}
20692062
}

0 commit comments

Comments
 (0)