Error Boundary

Detailed Explanation

Error Boundary is a special React Component that acts as a safety net. When any component inside it crashes (throws a JavaScript error), the Error Boundary catches the error and displays a friendly fallback page instead of breaking the entire Web Application.

In React Router, error boundaries are built into the routing system. When a loader or action throws an error, React Router automatically shows the nearest error boundary:

import { useRouteError } from 'react-router-dom';

export default function ErrorPage() {
  const error = useRouteError();
  return (
    <div>
      <h1>Something went wrong</h1>
      <p>{error.message || "An unexpected error occurred"}</p>
      <a href="/">Go Home</a>
    </div>
  );
}

Without error boundaries, a single Function crash in one Component would take down the entire page — showing a blank white screen. With error boundaries, only the broken section shows the error while the rest of the app keeps working.

You configure error boundaries in your route definition by adding an errorElement property. When you ask Claude Code to "add error handling to my app," it typically generates both Try/Catch blocks inside loaders/actions AND an error boundary component as a page-level safety net.

Error boundaries catch Rendering errors, loader errors, and action errors — but they don't catch errors inside event handlers (use Try/Catch for those).