How can I implement global error handling in React 18?

How can I implement global error handling in React 18?

In React 18, you can use Error Boundaries to catch errors in your component tree. You can create a class component that implements the componentDidCatch lifecycle method and the getDerivedStateFromError static method.

Can you show me a code example of an Error Boundary?

Sure! Here's a simple example:

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

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

  componentDidCatch(error, info) {
    console.error('Error caught in ErrorBoundary:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

You can wrap your components with this ErrorBoundary to catch errors.

What if I want to log errors to an external service?

You can modify the componentDidCatch method to send error details to an external logging service, like Sentry or LogRocket. Just make an API call within that method.

Is there a way to handle errors in functional components?

Yes! You can use the useErrorHandler hook from the react-error-boundary library, which allows you to handle errors in functional components.