Gracefully Handling Specific HTTP Error Status Codes with Fetch

async function fetchDataWithStatusCodeHandling(url) {
  try {
    const response = await fetch(url);

    if (response.ok) {
      return await response.json();
    } else {
      switch (response.status) {
        case 400:
          console.error('Bad Request: The server could not understand the request due to invalid syntax.');
          const errorDetails = await response.json();
          console.error('Details:', errorDetails);
          throw new Error('Bad Request: ' + JSON.stringify(errorDetails));
        case 401:
          console.error('Unauthorized: Authentication is required and has failed or has not yet been provided.');
          // Example: Redirect to login page or refresh token
          // window.location.href = '/login';
          throw new Error('Unauthorized');
        case 403:
          console.error('Forbidden: The client does not have access rights to the content.');
          throw new Error('Forbidden');
        case 404:
          console.error('Not Found: The server can not find the requested resource.');
          throw new Error('Resource Not Found');
        case 500:
          console.error('Internal Server Error: Something went wrong on the server.');
          throw new Error('Internal Server Error');
        default:
          console.error(`Unhandled HTTP error! Status: ${response.status} - ${response.statusText}`);
          throw new Error(`API Error: ${response.status}`);
      }
    }
  } catch (error) {
    console.error('Network or other error:', error);
    throw error;
  }
}

// Usage example:
// fetchDataWithStatusCodeHandling('https://api.example.com/secure-data')
//   .then(data => console.log('Data fetched:', data))
//   .catch(err => console.error('Failed to process data:', err.message));