How to Handle Errors in Remix: Simple Guide

In Remix, handle errors by creating ErrorBoundary or CatchBoundary components in your route modules. These components catch runtime errors or thrown responses and display friendly messages instead of crashing the app.

Why This Happens

Errors happen when your app encounters unexpected problems like failed data loading or bugs in your code. Without proper handling, Remix shows a default error screen or crashes, which is not user-friendly.

For example, if a loader throws an error but you don't define an error boundary, Remix will show a generic error page.

jsx

export async function loader() {
  throw new Error('Data failed to load');
}

export default function MyRoute() {
  return <div>My Route Content</div>;
}

Output

Error: Data failed to load

An unhandled error occurred in the loader.

The Fix

To fix this, add an ErrorBoundary component to your route module. Remix will render this component when an error occurs, letting you show a friendly message or fallback UI.

For errors thrown with throw new Response(), use CatchBoundary to handle HTTP errors gracefully.

jsx

export async function loader() {
  throw new Error('Data failed to load');
}

export function ErrorBoundary({ error }) {
  return <div><h1>Oops!</h1><p>{error.message}</p></div>;
}

export default function MyRoute() {
  return <div>My Route Content</div>;
}

Output

<h1>Oops!</h1>
<p>Data failed to load</p>

Prevention

Always define ErrorBoundary in your route modules to catch unexpected errors. Use CatchBoundary to handle expected HTTP errors like 404 or 401.

Validate data and handle errors in loaders and actions carefully. Use try-catch blocks if needed.

Enable linting tools to catch common mistakes early and write tests to cover error cases.

Related Errors

Common related errors include:

• Unhandled promise rejections: Always await async calls and handle errors.
• Missing error boundaries: Causes Remix to show default error UI.
• Throwing non-Response errors in loaders: Use throw new Response() for HTTP errors to use CatchBoundary.

Key Takeaways

Use ErrorBoundary in each route to catch runtime errors and show friendly messages.

Use CatchBoundary to handle HTTP errors thrown as responses.

Always handle errors in loaders and actions to avoid app crashes.

Validate data and use try-catch blocks where needed.

Write tests and use linting to catch errors early.