Error Boundaries

The blank-white-screen problem

If a component throws an error while React is drawing it (say it reads user.name but user is null), React unmounts the whole app and the user sees a blank white screen. An error boundary is a special component that wraps part of your UI, catches such errors, and shows a fallback (a friendly “something went wrong” message) instead — the rest of the page keeps working.

Think of it like a circuit breaker in your house: when one appliance shorts out, the breaker trips for that circuit only, so the whole house does not go dark.

The easy way: react-error-boundary

You can write a boundary by hand (it must be a class component — the one place React still needs one), but almost everyone uses the tiny, well-known library react-error-boundary. Install it, then wrap any risky part of your app. This runs in a real project, so it is shown as code with its Output.

npm install react-error-boundary

import { ErrorBoundary } from 'react-error-boundary';

function Fallback({ error }) {
  return (
    <div role="alert" style={{ padding: 16, color: '#b91c1c' }}>
      <p>Something went wrong.</p>
      <pre>{error.message}</pre>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={Fallback}>
      <Profile />   {/* if Profile throws while rendering, Fallback shows */}
    </ErrorBoundary>
  );
}

Here is exactly what happens:

1. We write a Fallback component — the friendly UI to show when something breaks. It receives the error that was thrown and prints error.message.
2. We wrap the risky part — <Profile /> — in <ErrorBoundary FallbackComponent={Fallback}>. The FallbackComponent prop tells the boundary what to show on failure.
3. Normally you just see Profile. But the moment Profile throws an error while rendering, the boundary catches it and swaps in Fallback instead — no blank screen, and the rest of App around the boundary is untouched.

What error boundaries do NOT catch

Boundaries only catch errors thrown during rendering. They do not catch:

• Errors inside event handlers (e.g. an onClick) — handle those with a normal try/catch.
• Errors inside async code like a fetch .then or setTimeout — catch and store them in state.
• Errors during server-side rendering (not relevant for a plain Vite app).