How can I log errors in a React application?

How can I log errors in a React application?

You can use the componentDidCatch lifecycle method to catch errors in class components, or the ErrorBoundary component for functional components.

Can you show me an example of using ErrorBoundary?

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.log('Error logged:', error, info);
  }

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

You can wrap your components with ErrorBoundary to catch errors.

What about logging errors to an external service?

You can use services like Sentry or LogRocket. They provide SDKs that you can integrate into your React app to log errors automatically.