Introduction

Error handling is a crucial aspect of building robust and user-friendly web applications. In ReactJS, handling errors gracefully ensures that your application remains functional even when something goes wrong. One of the powerful features React provides for this purpose is Error Boundaries. In this article, we'll explore what Error Boundaries are, how to implement them, and best practices for error handling in React applications.

Understanding Error Boundaries

Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire application. They provide a way to gracefully handle errors that occur during rendering, in lifecycle methods, and in constructors of the whole tree below them.

When to Use Error Boundaries

Error Boundaries are particularly useful in the following scenarios:

When you want to catch errors that occur during rendering.
When handling errors in lifecycle methods.
When errors occur in the constructors of the components.

Implementing Error Boundaries

To create an Error Boundary, you need to define a class component that implements either or both of the following lifecycle methods:

static getDerivedStateFromError(error)
componentDidCatch(error, info)

Here’s an example of how to implement an Error Boundary:

// Javascript

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render shows the fallback UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Error occurred:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong. Try refreshing the page..</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

// Typescript

import React, { Component, ErrorInfo } from 'react';
import errorBoundryStyles from './errorBoundryStyles';

interface ErrorBoundryProps {
  children: React.ReactNode;
  fallBackMessage?: string;
  hasError?: boolean;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundryProps, State> {

  constructor(props: ErrorBoundryProps) {
    super(props);
    this.state = { hasError: this.props.hasError || false };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error(`ErrorBoundary caught an error: ${JSON.stringify(errorInfo)}`);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <div className={errorBoundryStyles.errorBoundryConainer}>
        <h1>{this.props.fallBackMessage || "Looks like something went wrong. Please try again or contact support."}</h1>
      </div>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Using Error Boundaries in Your Application

To use the Error Boundary component, simply wrap it around any component that you suspect might throw an error:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import SomeComponent from './SomeComponent';

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

export default App;

Best Practices for Error Handling

Granular Error Boundaries: Instead of wrapping your entire application with a single Error Boundary, use multiple Error Boundaries for different parts of your application. This ensures that an error in one part of your app doesn’t break the entire UI.
Logging Errors: Always log errors to an external service for monitoring and debugging purposes. Services like Sentry, LogRocket, and New Relic can be integrated to capture error details and user sessions.
User-Friendly Fallback UI: Provide meaningful feedback to users when an error occurs. A simple "Something went wrong" message might not be enough. Consider adding retry buttons, links to support, or detailed error messages that can help users understand the issue.
Handling Asynchronous Errors: Remember that Error Boundaries do not catch errors inside event handlers, async functions, or errors thrown in the global scope. Use traditional try-catch blocks or error handling libraries for these cases.

function handleClick = async () => {
  try {
    // some async operation
  } catch (error) {
    console.error("Error occurred:", error);
  }
};

Conclusion

Error Boundaries are a powerful feature in React that helps you handle errors gracefully and maintain a smooth user experience. By implementing Error Boundaries and following best practices for error handling, you can build more robust and resilient React applications. Always remember to log errors for debugging and provide helpful feedback to users when something goes wrong.

References:

React Docs - Catching rendering errors with an error boundary

Error Boundaries and Error Handling in ReactJS