Explain Error Boundary and How to Create One

Error Boundaries are React components (currently must be class components) that catch JavaScript errors during rendering, in lifecycle methods, and in constructors of their child component tree. They prevent the entire app from crashing due to an error in one part and allow displaying a fallback UI.

They use static getDerivedStateFromError() to update state and trigger a fallback UI render, and componentDidCatch() for side effects like logging errors. They do not catch errors in event handlers, async code, SSR, or themselves.

Simplified Example (Class Component):

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { console.error("ErrorBoundary caught:", error, info); } render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}
// Usage
<ErrorBoundary> <MyComponent /></ErrorBoundary>