React Error Boundaries (Handling Component Errors)

React Error Boundaries provide a way to catch JavaScript errors in the component tree, preventing the entire application from crashing. They work like a try-catch block but for React components, ensuring a smoother user experience.

What Are Error Boundaries?

Error Boundaries are React components that catch errors occurring in their child components during rendering, lifecycle methods, or event handlers. They allow displaying fallback UI instead of breaking the entire application.

👉 Key Features of Error Boundaries:

✅ Catch errors in rendering, lifecycle methods, and constructors of child components.
✅ Display a fallback UI when an error occurs.
✅ Prevent the application from crashing entirely.
✅ Log errors for debugging and monitoring.

Creating an Error Boundary

Error Boundaries are class components that implement either of these lifecycle methods:

📌 static getDerivedStateFromError(error) → Updates state when an error occurs.

📌 componentDidCatch(error, info) → Logs the error details.

👉 Example: Creating an Error Boundary Component

import React, { Component } from ‘react’;

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

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

componentDidCatch(error, errorInfo) {
console.error(“Error caught by Error Boundary:”, error, errorInfo);
}

render() {
if (this.state.hasError) {
return <h2>Something went wrong. Please try again later.</h2>;
}
return this.props.children;
}
}

export default ErrorBoundary;

📝 Explanation

✔️ Initialize State in Constructor: this.state = { hasError: false }; tracks if an error occurs.
✔️ Catch Errors Using getDerivedStateFromError: This lifecycle method updates hasError to true when an error occurs in child components.
✔️ Log Error Details in componentDidCatch: Captures error details for debugging (console.error).
✔️ Render Fallback UI: If hasError is true, an error message is displayed instead of crashing the app.

Using an Error Boundary in an Application

Wrap components inside an ErrorBoundary to protect them from crashing the entire app.

👉 Example: Wrapping Components with Error Boundaries

import React, { useState } from ‘react’;
import ErrorBoundary from ‘./ErrorBoundary’;

function App() {
return (
<ErrorBoundary>
<BuggyComponent />
</ErrorBoundary>
);
}

export default App;

📝 How It Works:

✔️ When count reaches 5, BuggyComponent throws an error.
✔️ Instead of crashing, ErrorBoundary catches the error and displays a fallback UI.
✔️ The rest of the application continues to function normally.

Error Boundaries vs Try-Catch

Feature	Error Boundaries	Try-Catch in Event Handlers
Catches Errors in Render Phase	✅ Yes	❌ No
Catches Errors in Event Handlers	❌ No	✅ Yes
Prevents Full App Crash	✅ Yes	❌ No
Works with Async Code	❌ No	✅ Yes

🎯 Note:

✔ Use Error Boundaries for catching render-related errors.
✔ Use try-catch inside event handlers or async functions.

Multiple Error Boundaries for Better Isolation

Using multiple nested error boundaries prevents a single failure from affecting unrelated parts of the UI.

👉 Example: Using Multiple Error Boundaries

function App() {
return (
<div>
<ErrorBoundary>
<ComponentA />
</ErrorBoundary>
<ErrorBoundary>
<ComponentB />
</ErrorBoundary>
</div>
);
}

✔️ If ComponentA fails, only its boundary catches the error while ComponentB remains unaffected.

Logging Errors to a Monitoring Service

Logging errors helps in debugging and improving application stability. You can send error details to an external service like Sentry, LogRocket, or Firebase.

👉 Example: Logging Errors to an API

componentDidCatch(error, errorInfo) {
fetch(“https://your-logging-api.com/errors”, {
method: “POST”,
headers: { “Content-Type”: “application/json” },
body: JSON.stringify({ error: error.toString(), errorInfo })
});
}

Explanation:

✔️ Use componentDidCatch to Capture Errors: This lifecycle method logs errors that occur in child components.
✔️ Send Error Details to an API:
• fetch() makes a POST request to “https://your-logging-api.com/errors”.
• The error message and details are sent as JSON.

Best Practices for Using Error Boundaries

✅ Wrap Critical Components – Protect major UI sections (e.g., dashboards, forms, widgets).
✅ Use Multiple Boundaries – Isolate errors to specific components instead of affecting the whole app.
✅ Provide Meaningful Fallback UI – Display helpful messages or allow users to retry.
✅ Log Errors for Debugging – Integrate with monitoring services to track issues.
✅ Do Not Use in Event Handlers – Use try-catch for handling event-based errors.

Conclusion

Error Boundaries enhance stability and user experience by preventing the entire application from crashing due to component failures. By using them effectively, developers can isolate failures, display fallback UIs, and log errors for debugging. Every React app should implement Error Boundaries for better error handling!

React Error Boundaries