How can I use error boundaries in React for handling API errors?

How can I use error boundaries in React for handling API errors?

You can use error boundaries in React to catch JavaScript errors in your component tree. For API errors, you can create a custom error boundary that handles errors from API calls.

Can you show me a code example of how to implement this?

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, errorInfo) {
    // Log the error to an error reporting service
  }

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

    return this.props.children; 
  }
}

// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

This will catch errors in MyComponent and display a fallback UI.

What if the API returns an error response instead of throwing an error?

In that case, you can handle the error response within your component's state. You can set an error state based on the API response and conditionally render the UI based on that state.