45 Handles errors using react error boundaries

[jackcruz53]

No description provided.

[charliepnnl]

I like the idea of taking advantage of the router errorElement for route-level error messages.

I just have a few comments that need to be addressed.

[charliepnnl]

How about calling this component RouterErrorElement?

Please add jsDoc documentation for this component. Most important is to explain how it is to be used.

This component should also follow the Typescript pattern of our other components – see home.tsx.

[charliepnnl]

How about the following message:

<h1>An Unexpected Error Has Occurred</h1>
<p>
    To recover, try the following:
    <ul>
        <li>Refresh the browser</li>
        <li>Go back to the <a href="/">home screen</a></li>
    </ul>
</p>

When we have a support email address, we can add another bullet about contacting us.

[charliepnnl]

My testing shows that React Router also sends the stack trace to the console as well as displaying the error component. Bonus!

[charliepnnl]

We should also pursue adding ErrorBoundaries in other places such as:

• Around the content of RootLayout so the banner can continue to be displayed
• For PhotoInput and Photo to display a more helpful error message when an error occurs related to images
• Other places?