Spike: Front End Error Handling

[acollad1]

Need to investigate how to harden the code so that anytime there is a front-end crash the user gets an error message instead of a blank screen

• [ ] Look into using the Error Boundary Component to handle the potential global errors
• [ ] Fall Back UI Error Message: "An error has occurred. If the problem persists please contact the help desk"
• [ ] https://designsystem.digital.gov/components/alert/

Testing Note: Will need to work with the developers to create a test case to validate this ticket

[addisgmichael]

use package library react-error-boundary that provides an easy and reliable way to handle errors with error boundaries. features include

• renders fallback UI to gracefully show the error message
• reset the app state to desired state to recover from the errors caught
• can wire up to an error logging service
• provides useErrorBoundary hook to show the nearest error boundary about the error that the library does not support/catch by default. This includes Event handlers, Asynchronous code, Server-side rendering, Errors thrown in the error boundary itself (rather than its children).