This PR introduces ErrorBoundary component. All rendered components are wrapped with it and will catch client or server side (uses < Suspense />) errors from any of its children, display appropriate message and prevent the rest of the application from failing. It accepts and can display custom error component and loading message if it is passed as a prop to parent Placeholder.
Note that ErrorBoundary will not catch errors for:
Event handlers (for that, you need to use regular try/catch)
Asynchronous code (e.g., setTimeout or requestAnimationFrame callbacks)
Server-side rendering
Errors thrown in the error boundary itself (rather than its children)
If an error occurs in development mode or during page editing the ErrorBoundary will display error message with the name of the faulty component and the error's message.
If we are in production mode and the error happens not in editing mode ErrorBoundary will display generic error message without providing additional information about the error and the component.
If Custom error component has been provided to the Placeholder showing it will take precedence over the above scenarios.
Testing Details
[x] Unit Test Added
[x] Manual Test/Other (Please elaborate) - test with both client and server side errors (example throw errors in GraphQL-ConnectedDemo.dynamic and GraphQL-IntegratedDemo styleguide components) both for live and edit modes; error message component should be shown instead of only the failing component - rest of the app should be fine;
Types of changes
[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
Description / Motivation
This PR introduces ErrorBoundary component. All rendered components are wrapped with it and will catch client or server side (uses < Suspense />) errors from any of its children, display appropriate message and prevent the rest of the application from failing. It accepts and can display custom error component and loading message if it is passed as a prop to parent Placeholder. Note that ErrorBoundary will not catch errors for:
If an error occurs in development mode or during page editing the ErrorBoundary will display error message with the name of the faulty component and the error's message. If we are in production mode and the error happens not in editing mode ErrorBoundary will display generic error message without providing additional information about the error and the component. If Custom error component has been provided to the Placeholder showing it will take precedence over the above scenarios.
Testing Details
Types of changes