How can I handle API errors in my React app and provide user feedback?

How can I handle API errors in my React app and provide user feedback?

You can handle API errors in React by using try-catch blocks in async functions or by checking the response status. For user feedback, consider displaying error messages or using toast notifications.

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();
    // handle data
  } catch (error) {
    console.error('Fetch error:', error);
    // set error state to display to user
  }
}

What about using Axios for API calls?

With Axios, you can handle errors using the .catch() method. Here's an example:

axios.get('https://api.example.com/data')
  .then(response => {
    // handle data
  })
  .catch(error => {
    console.error('Axios error:', error);
    // set error state to display to user
  });