Error Boundary

Error boundaries catch JavaScript errors in child components and display a fallback UI. Export an ErrorBoundary component from your route module to handle errors gracefully.

Trigger an Error

Click the button below to intentionally throw an error. The parent route's ErrorBoundary will catch it and display a fallback UI.

How It Works

Export an ErrorBoundary component from a route module
When an error occurs in child routes, the boundary catches it
The boundary displays your custom error UI
Use resetErrorBoundary to allow users to retry

Example Code

import { HttpError } from "@udibo/juniper";

// routes/features/errors/main.tsx
export function ErrorBoundary({ 
  error, 
  resetErrorBoundary 
}: ErrorBoundaryProps) {
  return (
    <div>
      <h1>Something went wrong</h1>
      <p>{error instanceof HttpError ? error.exposedMessage : (error instanceof Error ? error.message : String(error))}</p>
      <button onClick={resetErrorBoundary}>
        Try Again
      </button>
    </div>
  );
}

// routes/features/errors/boundary.tsx
export default function Page() {
  const [shouldThrow, setShouldThrow] = useState(false);
  
  if (shouldThrow) {
    throw new Error("Oops!");
  }
  
  return (
    <button onClick={() => setShouldThrow(true)}>
      Throw Error
    </button>
  );
}