DEV Community

Cover image for React Error Boundaries & Practical Error Handling: Building Resilient Frontend Applications
Sachin Maurya
Sachin Maurya

Posted on

React Error Boundaries & Practical Error Handling: Building Resilient Frontend Applications

#react #nextjs #frontend #webperf

When React apps fail, the biggest issue isn’t the crash itself—it’s the poor experience users face afterwards.
Blank screens, frozen UIs, or vague “Something went wrong” messages are still too common.

In production, I’ve seen how much damage this can do. Users don’t know what happened, they repeat actions that make things worse, or they abandon the application entirely.

This article walks through how to make React applications more resilient using Error Boundaries, actionable error messaging, and accessibility-first error handling.

1. Error Boundaries in React

Introduced in React 16, Error Boundaries catch errors in the component tree and prevent the entire app from unmounting.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  componentDidCatch(error, info) {
    console.error("Error caught:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong. Please refresh.</h2>;
    }
    return this.props.children;
  }
}
Enter fullscreen mode Exit fullscreen mode

By wrapping critical sections of the app (like dashboards or checkout flows), you can contain failures to specific areas.

2. Actionable Error Messages

Users need clarity and options, not dead ends.

Instead of:

<p>Error occurred</p>
Enter fullscreen mode Exit fullscreen mode

Use something actionable:

<div className="error-message">
  <p>Unable to save your changes.</p>
  <button onClick={retry}>Retry</button>
  <button onClick={saveDraft}>Save as Draft</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Good error messages answer:

  • What happened?
  • Why (if possible)?
  • What can the user do next?

3. Accessibility in Error Handling

Error states must also be perceivable for users with assistive technologies.

<input 
  aria-invalid="true" 
  aria-describedby="email-error"
/>
<p id="email-error" role="alert">
  Please enter a valid email address.
</p>
Enter fullscreen mode Exit fullscreen mode
  • role="alert" ensures screen readers announce errors immediately.
  • aria-invalid flags the field as problematic.

This brings your app in line with WCAG guidelines and improves usability for everyone.

4. Results from Real Projects

Applying these principles in production has led to measurable impact:

  • Support tickets reduced by ~65%
  • Task completion times improved by ~40%
  • Increased user trust in the application

5. Checklist for Production-Ready Error Handling

  • Add Error Boundaries to critical UI areas
  • Write human-readable error messages
  • Provide recovery options (Retry, Cancel, Save Draft)
  • Implement accessibility attributes for error states
  • Log errors for developers, not end-users

Final Thought

Optimizing performance in React is important, but resilience is equally critical.
Every application will face failures—API outages, invalid inputs, unexpected states. The difference lies in how gracefully the application recovers.

By combining technical tools like Error Boundaries with UX and accessibility principles, we can ensure that errors don’t just stop our applications, but instead guide users through them.

Top comments (0)