Error Boundaries in React Explained

When you're building a React application, everything works perfectly… until it doesn’t.

A small bug in one component can suddenly crash your entire app. Users see a blank screen, and you’re left wondering what went wrong. This is exactly the problem Error Boundaries are designed to solve.

In this blog, we’ll break down Error Boundaries in a simple, real-world way so you can understand not just what they are, but when and why to use them.

What is an Error Boundary?

Think of an Error Boundary like a safety guard in your React app.

It’s a special component that catches JavaScript errors in its child components and shows a fallback UI instead of letting the whole app crash.

In simple words:

If something breaks, your app doesn’t go blank — it shows a friendly message.

Why Error Boundaries Matter

Imagine this situation:

You have a dashboard with multiple sections:

• Profile 
• Notifications 
• Reports 

Now, if the Reports section crashes, should the whole dashboard stop working?

No — only that section should fail.

That’s where Error Boundaries help.

Without Error Boundaries:

• The whole app crashes 
• Bad user experience 
• Hard to debug 

With Error Boundaries:

• Only the broken part is affected 
• The rest of the app works fine 
• Users see a meaningful message 

How Error Boundaries Work

Error Boundaries catch errors during:

• Rendering 
• Lifecycle methods 
• Constructors 

But they don’t catch:

• Event handler errors (like button clicks) 
• API errors (async code) 
• Errors inside themselves 

Creating an Error Boundary (Step-by-Step)

Error Boundaries must be created using class components.

import React from "react";

class ErrorBoundary extends React.Component {

  constructor(props) {

    super(props);

    this.state = { hasError: false };

  }

  static getDerivedStateFromError(error) {

    return { hasError: true };

  }

  componentDidCatch(error, errorInfo) {

    console.log("Error:", error);

    console.log("Error Info:", errorInfo);

  }

  render() {

    if (this.state.hasError) {

      return <h2>Something went wrong!</h2>;

    }

    return this.props.children;

  }

}

export default ErrorBoundary;

How to Use It

Wrap any component you want to protect:

<ErrorBoundary>

  <MyComponent />

</ErrorBoundary>

Now, if MyComponent crashes, your app will show a fallback UI instead of breaking.

Real Example

function BuggyComponent() {

  throw new Error("Crash!");

}

<ErrorBoundary>

  <BuggyComponent />

</ErrorBoundary>

Output:

Instead of a blank screen → "Something went wrong!"

Where Should You Use Error Boundaries?

This is where many developers go wrong.

Smart Placement Strategy:

✔ Wrap major sections:

<ErrorBoundary>

  <Navbar />

</ErrorBoundary>

<ErrorBoundary>

  <Dashboard />

</ErrorBoundary>

Wrap risky components (API-heavy or dynamic UI)

Don’t wrap everything in one place only

Best practice: Use multiple small boundaries

Custom Fallback UI (Better UX)

Instead of a boring message, give users a better experience:

if (this.state.hasError) {

  return (

    <div>

      <h1>Oops! Something broke </h1>

      <p>Please refresh or try again later.</p>

    </div>

  );

}

Can We Reset an Error?

Yes! You can allow users to retry:

<button onClick={() => this.setState({ hasError: false })}>

  Try Again

</button>

Important Limitation

Error Boundaries are not magic.

They won’t catch:

Button click errors

API failures

setTimeout errors

For those, use try-catch

Error Boundary vs Try-Catch

Feature

Error Boundary

Try-Catch

UI Errors

Yes

No

Event Errors

No

Yes

Async Code

No

Yes

Real-World Use Cases

• E-commerce apps → Product section fails, rest works 
• Dashboards → One widget crashes, others stay 
• Chat apps → Message panel fails, app still usable 

Best Practices

• Use multiple Error Boundaries 
• Show user-friendly messages 
• Log errors (important for debugging) s
• Don’t rely on one global boundary 

Frequently Asked Questions (FAQs):

1. Error Boundaries in React: What are they?

Error Boundaries are components defined in React that catch JavaScript errors across their child components, log those errors, and display a fallback UI when such an error happens instead of crashing the entire app.

2. What is an Error Boundary in React, and how to create it?

You implement it as a class component with lifecycle methods such as componentDidCatch or getDerivedStateFromError.

3. Which errors are caught by Error Boundaries?

They log caught during rendering and lifecycle methods, as well as in constructors of child components.

4. What are errors that Error Boundaries DO NOT catch?

They do not catch errors in event handlers, asynchronous code, or server-side rendering. Or errors that are thrown from within them.

5. Error Boundaries in React apps — why to use it?

They enhance UX by not crashing the whole app and displaying fallback UI when errors occur

Related Links:

React Application Optimization Techniques

How to deploy React Applications?

Do visit our channel to know more: SevenMentor

Author:-

Sagar Kshirsagar