What is an Error Boundary in React js?

In React, an error boundary is a special type of component that acts as a JavaScript try-catch block for errors that occur during the rendering of components. It allows you to catch JavaScript errors anywhere in a component tree and handle them gracefully, preventing the entire application from crashing due to a single component's error.

Here is a basic example of how you can define an error boundary in a React component:

import React, { Component } from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    // You can log the error to an error reporting service
    // or perform other actions here
    console.error('Error caught by error boundary:', error, errorInfo);

    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
  }

  render() {
    if (this.state.hasError) {
      // Render a fallback UI when an error occurs
      return (
        <div>
          <h2>Something went wrong.</h2>
          <p>{this.state.error && this.state.error.toString()}</p>
          <p>Component stack trace:</p>
          <pre>{this.state.errorInfo && this.state.errorInfo.componentStack}</pre>
        </div>
      );
    }

    // Render children if there is no error
    return this.props.children;
  }
}

export default ErrorBoundary;

To use the error boundary, you wrap the part of your component tree that you want to monitor for errors with the ErrorBoundary component:

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

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <ErrorBoundary>
        {/* Components that might throw errors go here */}
        <SomeComponent />
        <AnotherComponent />
      </ErrorBoundary>
    </div>
  );
}

export default App;

In the example above, if an error occurs within SomeComponent or AnotherComponent, the error boundary will catch it and render the fallback UI defined in the ErrorBoundary component, preventing the entire application from crashing. The error details can also be logged or sent to an error reporting service for further analysis.

Error boundaries are particularly useful in large React applications where an error in one component should not affect the entire application. They help improve the user experience by gracefully handling errors and providing developers with information needed for debugging.