Introduction

When developing React applications, sometimes you may encounter unexpected errors. These errors can negatively affect user experience. React provides a special mechanism to handle such errors: Error Boundaries. In this article, we will examine the usage of Error Boundary with React in detail.

What is Error Boundary?

Error Boundary is a component used to catch errors among the children of React components. When an error occurs, the Error Boundary catches this error and informs the user with a fallback UI. Thus, your entire application does not crash because of a single error.

Creating an Error Boundary

To create an Error Boundary, you need to use at least one lifecycle method: componentDidCatch and getDerivedStateFromError.

import React from 'react';

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

  static getDerivedStateFromError(error) {
    // Update the state when an error occurs
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can send error data to an error reporting service
    console.error("Error: ", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Show fallback UI in case of an error
      return 
An error occurred!
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Conclusion

Using Error Boundary with React provides an effective way to catch errors in your application. Thanks to this mechanism, you can offer your users a better experience and minimize negative feedback. Remember, Error Boundary is only effective for catching component errors; for event or non-update errors, you should use other methods. When developing your application, always pay attention to error management.