[Backsearch P1] FE error handling

DigitalCommons / land-explorer-front-end

React app for the Land Explorer front end

http://landexplorer.cc

GNU Affero General Public License v3.0

1 stars 0 forks source link

[Backsearch P1] FE error handling #289

Closed lin-d-hop closed 19 hours ago

lin-d-hop commented 7 months ago

Description

Whee the FE crashes it crashes badly. You can see it in this video:

https://github.com/DigitalCommons/land-explorer-front-end/assets/8669848/e44d4362-4172-4ece-926b-c9de19277c04

According to @King-Mob it seems this crashing when there is a missing piece of information that the FE thinks it should have. Can we wrap external calls to catch errors and fail gracefully rather than a complete crash?

Acceptance Criteria

When FE is missing data from an external call, the user sees a message 'Something went wrong. Please try again.' instead of the white screen of death.

ms0ur1s commented 7 months ago

Hi @rogup , I started to look at this issue but thought it better to leave it you. @King-Mob mentioned you had your own error handling procedure / process, and it would make more sense if you brought your experience to bear on the issue. I was only going to do something industrial, anyway, like throw an error boundary around the app using package like react-error-boundary.

ms0ur1s commented 7 months ago

Had good pairing session with @rogup and added a basic top level error boundary using the package mentioned above (react-error-boundary), to catch unhandled errors - in particular react white screen errors.

In the case of such errors an error page is displayed with a generic message and a link back to the app. The error is also written to the console so that more specific error handling can be added when necessary.