How can I handle API errors in my React app?

How can I handle API errors in my React app?

You can handle API errors in React by using try-catch blocks in async functions or by checking the response status in your fetch calls.

What about logging these errors for debugging?

You can log errors to the console or use a logging service like Sentry to capture and track errors in production.

Can you show me an example of how to implement this?

Sure! Here's a simple example using fetch:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
    // Optionally log to a service
  }
}