How does Remix handle error boundaries?
Answer
Remix provides nested error boundaries — each route can have its own ErrorBoundary that catches errors thrown in that route's loader, action, or component. Export from a route: export function ErrorBoundary() { const error = useRouteError(); if (isRouteErrorResponse(error)) { return <div>{error.status} {error.data}</div>; } return <div>Something went wrong: {error.message}</div>; }. Types of errors: Thrown responses: throw new Response("Not Found", { status: 404 }) — caught by the nearest error boundary, common for 404s and unauthorized access. Unexpected errors: uncaught exceptions — also caught by the nearest error boundary. Key advantage: the error is contained to the route that caused it — the parent layout remains functional. If /dashboard/users errors, the /dashboard layout (sidebar, navigation) still renders, and only the content area shows the error. This prevents full-page crashes from localized errors.