An Error Boundary is a [React](/courses/reactjs) component that catches certain errors in its descendant component tree and displays fallback UI instead of letting the entire interface crash. ### Why Error Boundaries Are Useful Imagine a dashboard contains several independent areas: ```text Dashboard ├── Profile ├── Analytics ├── Notifications └── RecentActivity ``` If `Analytics` throws an error while rendering, you may prefer to show: ```text Analytics is temporarily unavailable ``` instead of losing the entire dashboard. ### Basic Error Boundary Error Boundaries are traditionally implemented with a class component: ```jsx import React from "react"; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { console.error("Caught error:", error); console.error("Component stack:", info.componentStack); } render() { if (this.state.hasError) { return (

Something went wrong.

Please try again later.

); } return this.props.children; } } ``` Use it like this: ```jsx ``` ### What Happens When a Child Throws? Conceptually: ```text Analytics renders ↓ error is thrown ↓ nearest Error Boundary catches it ↓ Error Boundary updates its state ↓ fallback UI is rendered ``` ### getDerivedStateFromError This method lets the boundary update state after detecting an error: ```jsx static getDerivedStateFromError() { return { hasError: true }; } ``` That state is then used to render fallback UI. ### componentDidCatch `componentDidCatch` is useful for side effects such as error reporting: ```jsx componentDidCatch(error, info) { reportError(error, info); } ``` For example, production applications may send the error to an error-monitoring service. ### Error Boundaries Catch Errors Below Them This structure: ```jsx ``` lets the boundary catch supported rendering errors from `Profile` and its descendants. The boundary does not catch errors thrown inside itself. ### Where Should Error Boundaries Be Placed? You can place one around the whole application: ```jsx ``` but smaller boundaries often provide a better experience: ```jsx ``` Now one broken feature does not necessarily replace everything else. ### Error Boundaries Are Different from try/catch This does not normally protect [React](/courses/reactjs) rendering in the same way: ```jsx try { return ; } catch (error) { return ; } ``` because creating the React element and later rendering its component tree are separate parts of React's work. Error Boundaries integrate with React's rendering lifecycle specifically for this purpose. ### Interview-Ready Answer An Error Boundary is a React component that catches supported errors thrown by descendant components during rendering and related React lifecycle work. It can display fallback UI instead of allowing the affected part of the interface to crash. Error Boundaries are commonly used around important or independent UI sections and can also log errors through `componentDidCatch`.