How do I handle asynchronous errors in React?

How do I handle asynchronous errors in React?

You can handle asynchronous errors in React by using try-catch blocks in async functions or by using error boundaries.

Can you give me an example of using try-catch in a React component?

Sure! Here's a simple example:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
    setError(error);
  }
}

What about using error boundaries?

Error boundaries are React components that catch JavaScript errors in their child component tree. You can create one by implementing the componentDidCatch lifecycle method.

Can you show me how to create an error boundary?

Absolutely! Here's a basic 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);
  }

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