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

[sitecore-jss-react] Introduce ErrorBoundary to serve as error handling per component #1786

Merged
merged 14 commits into from
May 2, 2024

Conversation

yavorsk
Copy link
Contributor

@yavorsk yavorsk commented Apr 26, 2024

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:

  • 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

  • Unit Test Added
  • 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)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

@yavorsk yavorsk requested a review from a team April 26, 2024 13:07
@yavorsk yavorsk requested a review from addy-pathania May 2, 2024 08:35
Copy link
Contributor

@addy-pathania addy-pathania left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! 👍🏼

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants