Handle React hydration errors

[jroebu14]

Is your feature request related to a problem? Please describe. Errors that happen on the client in the React app hydration phase are currently unhandled. The result of this is a white screen shown to the user and a hard to trace error logged in the console.

Describe the solution you'd like Instead of a white screen shown to the user we should show a localised error message. We should also log the error message and a stack trace in the console. Ideally we should log this using Winston so we can be alerted to errors sooner than noticing unusual patterns in traffic, however Winston is not currently setup to work on the client.

An error-boundary component can be used to wrap the ClientApp component but we also need to try/catch the hydration function and log any errors from this function before the error-boundary component takes effect because from experience these errors were more helpful than what was logged from error-boundary component.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

NB NextJS handle similar errors with an error-boundary component that uses componentDidCatch as shown here which is their function that calls ReactDOM.hydrate

Testing notes [Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• [ ] This feature is expected to need manual testing.

Additional context Add any other context or screenshots about the feature request here.

[neildoughty]

Is there any super low tech way a user could let us know if they see a page, which uses the above piece of thinking? Is there a way to use Slack to let users ping us if they spot a broken page or a bug?

[jroebu14]

I was thinking about an additional sentence in error pages for such situations that says something like "Please contact us with your browser, device, location etc so we can resolve this error as soon as possible" we could also maybe link to a service that fetches browser/device info for the user. We would obviously need translations for this though.