⚛️ Error Boundaries

? Quick Overview

Error Boundaries are special class-based React components designed to catch runtime errors that occur during rendering, lifecycle methods, and constructors of their child components.

Instead of allowing the entire application UI to crash, Error Boundaries display a fallback UI and keep the rest of the application running smoothly.

? Key Concepts

• Implemented only using class components
• Act as a safety net around unstable components
• Catch errors before they reach the root of the app
• Improve user experience by preventing blank screens
• Commonly used in production-grade React applications

? Syntax & Theory

• getDerivedStateFromError updates internal state when an error occurs
• componentDidCatch receives error details and stack information
• Fallback UI is rendered conditionally using state
• Error Boundaries work hierarchically in the component tree

? Code Example: Creating an Error Boundary

// Error Boundary implemented using a class component
import React from "react";

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

static getDerivedStateFromError(error) {
// Trigger fallback UI on error
return { hasError: true };
}

componentDidCatch(error, info) {
// Capture error details for logging or monitoring
console.error("Caught by ErrorBoundary:", error, info);
}

render() {
if (this.state.hasError) {
return <h3>Something went wrong.</h3>;
}
return this.props.children;
}
}

export default ErrorBoundary;

? Usage Example

// Component that crashes intentionally
function BuggyComponent() {
throw new Error("Component crashed!");
}

// Wrapping the buggy component with ErrorBoundary
<ErrorBoundary>
<BuggyComponent />
</ErrorBoundary>

? Explanation

When BuggyComponent throws an error, React stops rendering that component tree. The Error Boundary intercepts the error, updates its internal state, and displays a fallback message instead of breaking the entire UI.

All other components outside the Error Boundary continue to work normally.

? What Error Boundaries Catch

• Errors during rendering
• Errors in lifecycle methods
• Errors in constructors of child components

? What Error Boundaries Do NOT Catch

• Errors inside event handlers
• Errors in asynchronous code (setTimeout, promises)
• Errors during server-side rendering
• Errors thrown inside the Error Boundary itself

? Real-World Use Cases

• Wrapping dashboards and analytics widgets
• Protecting API-driven UI sections
• Displaying user-friendly error messages
• Sending error logs to tools like Sentry or LogRocket