Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle React hydration errors #8889

Open
1 task
jroebu14 opened this issue Feb 18, 2021 · 2 comments
Open
1 task

Handle React hydration errors #8889

jroebu14 opened this issue Feb 18, 2021 · 2 comments
Labels
cross-team For visibility for both World Service teams (Engage & Media) Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. technical-work Technical debt, support work and building new technical tools and features

Comments

@jroebu14
Copy link
Contributor

jroebu14 commented Feb 18, 2021

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.

@jroebu14 jroebu14 added Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. cross-team For visibility for both World Service teams (Engage & Media) technical-work Technical debt, support work and building new technical tools and features labels Feb 18, 2021
@neildoughty
Copy link

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
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cross-team For visibility for both World Service teams (Engage & Media) Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. technical-work Technical debt, support work and building new technical tools and features
Projects
None yet
Development

No branches or pull requests

2 participants