Error Boundaries & Graceful Degradation

Component errors should not collapse the entire product. Error boundaries catch JavaScript errors in a subtree, show a fallback, and let the rest of the page keep working. They are not a replacement for fixing bugs; they are a containment strategy for failures that happen in production anyway.

React Boundary

React error boundaries are class components because they rely on lifecycle methods. Wrap independently useful regions such as navigation, feed, chart, editor, or settings panel.

import { Component, type ErrorInfo, type ReactNode } from "react";

type Props = {
  children: ReactNode;
  fallback: ReactNode;
  logError: (error: Error, info: ErrorInfo) => void;
};

type State = { hasError: boolean };

export class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false };

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, info: ErrorInfo): void {
    this.props.logError(error, info);
  }

  render(): ReactNode {
    if (this.state.hasError) return this.props.fallback;
    return this.props.children;
  }
}

Send caught errors to monitoring with enough context to debug: route, user session identifier, release version, and component stack. Avoid logging private form data.

Svelte Async Failures

Svelte does not use React-style error boundaries, but async UI can degrade with {#await} catch blocks. The concept is the same: localize failure and provide a recovery path.

type AsyncState<T> =
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: Error };

export function toAsyncState<T>(promise: Promise<T>): Promise<AsyncState<T>> {
  return promise
    .then((data) => ({ status: "success", data }) as const)
    .catch((error: Error) => ({ status: "error", error }) as const);
}

Fallback UI should be honest and useful: state that something failed, preserve surrounding navigation, and offer retry or reload when that can work.

Further Learning

Search these terms to go deeper:

• “React error boundary componentDidCatch” — class boundary mechanics
• “Svelte await catch block” — async fallback patterns in Svelte
• “frontend graceful degradation patterns” — keeping partial interfaces usable
• “Sentry component stack React” — logging boundary errors with useful context

Error Boundaries & Graceful Degradation

Bugs happen in production no matter how careful you are. The question is: when one part of your app crashes, does the whole page go blank, or just that one broken piece? An error boundary makes sure it’s just the one piece.

Contain the damage

Imagine a dashboard with a nav bar, a feed, and a chart. If the chart hits a bug, you don’t want the nav and feed to disappear too. An error boundary wraps a section, catches any crash inside it, and shows a friendly fallback there — while everything else keeps working.

In React

React error boundaries are a special component that catches errors in whatever they wrap:

<ErrorBoundary fallback={<p>This chart failed to load.</p>}>
  <Chart />
</ErrorBoundary>

If <Chart> crashes, the user sees “This chart failed to load” there, and the rest of the page is fine.

Make the fallback helpful

A good fallback is honest and useful: say something went wrong, keep the surrounding page working, and — when possible — offer a “Try again” button. A blank screen tells the user nothing; “Something went wrong loading comments — retry?” lets them recover.

Log it so you can fix it

When a boundary catches an error, send it to an error-tracking service (like Sentry) with helpful context — which page, which release version — so you actually find out it happened and can fix it. (Just don’t log private user data.)

In one sentence

An error boundary catches a crash in one part of the UI and shows a fallback there instead of blanking the whole page — wrap each independent section in its own boundary, make the fallback offer recovery, and log the error so you can fix it.

Want to go deeper?

Switch to Expert mode above for the full React ErrorBoundary class, Svelte’s {#await} catch blocks, and logging with useful context.