What is error boundary and how to implement it?

Question

Accepted Answer

**Error Boundary** is a React component that **catches JavaScript errors** in its child component tree during rendering, lifecycle methods, and constructors — and displays a **fallback UI** instead of crashing the entire application. **Think of it like a try-catch block for your UI** — if one component crashes, the error boundary catches it and shows a friendly error message, while the rest of the app continues working. **Complete implementation:** ```tsx import React, { Component, ErrorInfo, ReactNode } from "react"; interface Props { children: ReactNode; fallback?: ReactNode; onError?: (error: Error, info: ErrorInfo) => void; } interface State { hasError: boolean; error: Error | null; } class ErrorBoundary extends Component { state: State = { hasError: false, error: null }; static getDerivedStateFromError(error: Error): State { // Update state so the next render shows fallback UI return { hasError: true, error }; } componentDidCatch(error: Error, info: ErrorInfo) { // Log error to monitoring service console.error("Error caught:", error, info.componentStack); this.props.onError?.(error, info); } render() { if (this.state.hasError) { return ( this.props.fallback || (

Something went wrong

{this.state.error?.message}

) ); } return this.props.children; } } // Usage function App() { return ( Something broke! Please refresh.} onError={(error, info) => { // Send to Sentry, LogRocket, etc. reportError(error, info.componentStack); }} > ); } ``` **What it catches:** - Rendering errors (in JSX, render function) - Lifecycle method errors (componentDidMount, etc.) - Constructor errors **What it does NOT catch:** - **Event handler errors** — use try-catch inside the handler - **Async code** — setTimeout, Promise, async/await - **Server-side rendering** (SSR) - **Errors in the error boundary itself** **Error handling for event handlers:** ```tsx function Button() { const handleClick = () => { try { riskyOperation(); } catch (error) { // Handle error manually console.error("Button click error:", error); } }; return ; } ``` **Best practices:** - Place error boundaries at **strategic points** — page level, feature level, sidebar level - Provide **meaningful fallback UI** with a way to recover - **Log errors** to monitoring services (Sentry, LogRocket) - Use **multiple boundaries** — don't wrap the entire app in one (that defeats the purpose)

React: What is error boundary and how to implement it?