Add an error boundary

[jedpittman]

Follow information here to add an error boundary to the application.

https://reactjs.org/docs/error-boundaries.html

Error boundary should include a prompt for the user to reach out to the same contact information and include information that led to the error and the error message from the screen if available.

[jedpittman]

@LewisStaples there are some good resources that you might use for this one based on our conversation.

The top level of the application is here. It is here that you'd want to add the ErrorBoundary...probably at the top level.
https://github.com/codeforboston/jobhopper/blob/develop/frontend/src/Main.tsx

Probably something like this:
const Main = () => ( <React.StrictMode> <Provider store={createStore()}> <MuiThemeProvider theme={theme}> <ErrorBoundary> <BrowserRouter> <App /> </BrowserRouter> </ErrorBoundary> </MuiThemeProvider> </Provider> </React.StrictMode> );

This should work to catch any issues in the application or the browserrouter part of the code (with the standard caveats).

If you are looking for what else besides the messaging should be in that component, you could look to this page for some starting points:
https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/error_boundaries/