Containing the Blast: Error Boundaries

The White Screen of Death

In modern Single Page Applications (SPAs) built with frameworks like React, the entire UI is a tree of components rendered by JavaScript. This architecture is powerful, but it has a dangerous failure mode: a single unhandled JavaScript error anywhere in the component tree can crash the entire application, leaving users with a blank white screen and no way to recover except a full page refresh.

This is the frontend equivalent of a single microservice crashing taking down the entire platform.

Error Boundaries: Fault Isolation for the UI

An Error Boundary is a special React component that wraps a subtree of your UI. It implements the componentDidCatch lifecycle method to intercept errors thrown by any component inside it. Instead of the error propagating up and crashing the whole app, the boundary catches it and renders a fallback UI — typically a user-friendly message like "This section couldn't load. Try refreshing."

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render shows the fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Report the error to your monitoring service
    Sentry.captureException(error, { extra: errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return <div className="error-fallback">Something went wrong here.</div>;
    }
    return this.props.children;
  }
}

// Usage: wrap high-risk sections
<ErrorBoundary>
  <RecommendationWidget />
</ErrorBoundary>

The componentDidCatch call is critical from an SRE perspective. Without it, errors caught by boundaries are silently swallowed — they never appear in your monitoring. The boundary must actively report the error to your observability platform, or you have invisible failures.

Placement strategy: Don't wrap the entire app in one boundary — that's only marginally better than no boundary. Wrap individual features or sections (the sidebar, the recommendation widget, the comments section) so that a failure in one area doesn't degrade unrelated functionality. Think of it as blast radius containment.