New Inbound Filter: React Hydration Errors #45038
Description
Problem Statement
About this ticket: #44877
We re-evaluated our decision and decided for now that we are going to, by default, ignore hydration error as a new Inbound Filter.
The reason for this is, currently, those errors are not actionable, we can't reference the component that triggered it, therefore, it's hard to understand and you usually just want to ignore it.
Maybe in the future we revisit this if we are able to detect the root cause in the SDK to make this actionable but for now, ignoring them will result in a better user experience.
Solution Brainstorm
Add a new Inbound Filter:
Filter out hydration errors
React falls back to do a full re-render on a page, these errors are often not actionable.
We should make this, retroactively a default for all projects and when enabled, Relay filters those errors out.
Here are the error messages we want to filter:
'https://reactjs.org/docs/error-decoder.html?invariant=419', // The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.
'https://reactjs.org/docs/error-decoder.html?invariant=422', // There was an error while hydrating this Suspense boundary. Switched to client rendering.
'https://reactjs.org/docs/error-decoder.html?invariant=423', // There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root...
'https://reactjs.org/docs/error-decoder.html?invariant=425' // Text content does not match server-rendered HTML...