React Error Boundaries: Graceful Error Handling in Production | DevPrep

React Error Boundaries: Graceful Error Handling in Production | DevPrep

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

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Log to error reporting service
    console.error("Error boundary caught:", error, errorInfo);
    reportToSentry(error, { componentStack: errorInfo.componentStack });
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <DefaultErrorUI error={this.state.error} />;
    }
    return this.props.children;
  }
}

function Dashboard() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <ErrorBoundary fallback={<WidgetError name="Revenue" />}>
        <RevenueChart />
      </ErrorBoundary>
      <ErrorBoundary fallback={<WidgetError name="Users" />}>
        <UserStats />
      </ErrorBoundary>
      <ErrorBoundary fallback={<WidgetError name="Orders" />}>
        <OrderTable />
      </ErrorBoundary>
    </div>
  );
}
// If OrderTable crashes, Revenue and Users still work!

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div className="error-panel">
      <h2>Something went wrong</h2>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try Again</button>
    </div>
  );
}

// With react-error-boundary library
import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary
  FallbackComponent={ErrorFallback}
  onReset={() => queryClient.invalidateQueries()}
  resetKeys={[userId]}  // Auto-reset when userId changes
>
  <UserProfile userId={userId} />
</ErrorBoundary>