search

Nonprofit-Exchange-Hub / web-app

Nonprofit Circle (formerly Nonprofit Exchange Hub) A hub for the exchange of goods, information and connections for nonprofits of all sizes.
MIT License
29 stars 19 forks source link

Create ErrorBoundary component for /client #360

Closed marvinsjsu closed 1 year ago

marvinsjsu commented 1 year ago

It will probably be good for us to have an ErrorBoundary component to gracefully handle runtime errors on the client - https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

This would eventually allow us to send error logs to a service, if needed, and we can display nicer UI stating that something unexpected has occurred. We may need design to provide us with a mock of this UI, but we can create the component now and implement the mock when ready.

Related to https://github.com/orgs/Nonprofit-Exchange-Hub/projects/14/views/1?pane=issue&itemId=33627395

EtoKruto commented 1 year ago

Began work, the easiest path was to introduce a framework that already exists and is updated for our latest version of React, which is the react-error-boundary (https://www.npmjs.com/package/react-error-boundary). Haven't had success to show the error in Dev but this maybe due to the environment itself, not sure. Will attack this more but wanted to at least drop something into progress if anyone had more interesting ideas for the path forward