Dealing with unexpected errors

During runtime, a Remix application is executed both in the browser and on the server. A lot can go wrong, and unexpected errors can happen both on the client and server. It is important to consider the error case to provide a resilient user experience. In this section, we will investigate how to handle unexpected errors in Remix both at the root level and in nested routes.

Invoking client and server errors

In Chapter 2, Creating a New Remix App, we provided a troubleshooting guide and investigated how Remix handles errors on both the client and server uniformly. Let’s review Remix’s default error handling again by invoking some “unexpected” errors:

1. Open your BeeRich application in an editor.
2. Open the dashboard.tsx route module inside the app/routes folder.
3. Add the following code inside the loader function body before the return statement:

   throw Error('Something went wrong!');

   By throwing an error...