What are error boundaries?

Error Boundaries are special React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the whole application.

• By default, if an error occurs in a React component, it can break the entire UI.
• React introduced Error Boundaries in version 16 to gracefully handle such errors.
• They only catch errors during rendering, lifecycle methods, and constructors of their child components.
• Errors inside event handlers must be handled manually using try...catch.

✅ Use Cases

• To prevent entire app crashes due to one faulty component.
• To display fallback UIs like “Something went wrong”.
• To catch unexpected errors in production and log them.

⚙️ How to Create an Error Boundary

You need to create a class component (not a function component) and use these two lifecycle methods:

• static getDerivedStateFromError(): Updates state to display fallback UI.
• componentDidCatch(): Logs the error information.

⚠️ Example Component That Throws Error

This would be caught by the ErrorBoundary, and instead of crashing the entire app, it will show the fallback UI.

🚫 Limitations of Error Boundaries

• ❌ Only catch errors in:

  • Rendering
  • Lifecycle methods
  • Constructors

• ❌ Don’t catch:

  • Errors inside event handlers
  • Asynchronous code (like setTimeout)
  • Server-side rendering errors

💡 Interview Tip

You can say:

"Error boundaries in React are components that catch runtime errors in child components during rendering and lifecycle methods, preventing the entire app from crashing. They render a fallback UI and are especially useful in production for better error handling."