site-kit-wp: Leverage React error boundaries to improve user experience of client side errors

Feature Description

Currently if an error is raised within React and not caught, it causes the entire component tree to be unmounted, resulting in a blank screen which is a terrible experience for the user.

We should leverage React’s error boundaries at the top-level of our React apps to catch any errors that weren’t caught, and then handle it more gracefully.

When catching an error, we could render a different component which could provide more information to the user, and better guide them as to what steps to take next. We could even give them information that they could copy and paste to provide when requesting support.

This gives the user a better experience and hopefully helps to provide better information for everyone to resolve the problem more quickly.

Error boundaries can be used at any level, (and we’re already using them in some places) but this is particularly about using them as a last line of defense to prevent a blank screen.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Gracefully catch React errors on any of Site Kit’s “React apps” (screens and admin bar).
• Show a message that an error occurred: “Oops! Looks like this page is not rendering correctly. We’ll help you get to the bottom of this — please start a thread on our support forum and include the error snippet below.”
• Include a snippet of the error trace that people can copy and paste into e.g. the support forums.
• Use https://www.npmjs.com/package/@babel/plugin-transform-react-display-name to maintain component display names so that the error trace is more helpful in figuring out and resolving the issue.

Implementation Brief

• Create a new ErrorHandler component that incorporates React Error Boundaries and the text above
• Wrap each of the “App” components in the ErrorHandler component:
  • assets/js/components/dashboard-details/dashboard-details-app.js
  • assets/js/components/dashboard-splash/dashboard-splash-app.js
  • assets/js/components/dashboard/dashboard-app.js
  • assets/js/components/settings/settings-app.js
• Add @babel/plugin-transform-react-display-name and ensure that component names are preserved in production builds
• Add a “testing”/debug error component to simulate the error. 😄

Changelog entry

• Improve JS error handling consistently across individual React apps and allow for better contextualization.

QA Instructions

To test this import the test component that throws an error:

import ErrorComponent from 'GoogleComponents/ErrorHandler/ErrorComponent';

and insert <ErrorComponent /> inside any component other than ErrorHandler itself. It should display an error like: