How do you handle HTTP errors in Fetch?

Handling HTTP errors in the Fetch API is an essential skill for any frontend developer. The Fetch API provides a modern way to make network requests and is widely used in web applications. However, it does not automatically reject promises on HTTP error statuses (like 404 or 500). Instead, it resolves the promise and allows you to handle the error based on the response status. This behavior can sometimes lead to confusion, especially for those new to the API. Below, I will outline best practices for handling HTTP errors when using Fetch, along with practical examples and common pitfalls to avoid.

Understanding Fetch API Response Handling

When you make a request using the Fetch API, the response is returned as a promise. The promise will resolve regardless of the HTTP status code. This means that you need to explicitly check the response status to determine if the request was successful or if an error occurred.

Basic Error Handling

To handle errors effectively, you can check the response status code and throw an error if it indicates a failure. Here's a simple example:

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok: ' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        console.log('Data received:', data);
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

In this example, the `response.ok` property is a convenient way to check if the response status is in the range of 200-299. If it is not, we throw an error, which is then caught in the `catch` block.

Detailed Error Handling

For more granular error handling, you might want to differentiate between various HTTP status codes. This can help you provide more specific feedback to users or take different actions based on the error type. Here’s an example:

fetch('https://api.example.com/data')
    .then(response => {
        if (response.status === 404) {
            throw new Error('Resource not found (404)');
        } else if (response.status === 500) {
            throw new Error('Server error (500)');
        } else if (!response.ok) {
            throw new Error('Network response was not ok: ' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        console.log('Data received:', data);
    })
    .catch(error => {
        console.error('Fetch error:', error.message);
    });

This approach allows you to handle specific errors differently, which can be useful for displaying user-friendly messages or triggering specific application logic.

Best Practices

• Always Check Response Status: Never assume a successful response. Always check the status code.
• Use `response.ok`: Utilize the `response.ok` property for a quick check of success.
• Provide User Feedback: Inform users of errors in a clear and friendly manner.
• Log Errors: Always log errors for debugging purposes, especially in production environments.
• Handle Network Errors: Be prepared to catch network errors that may occur outside of HTTP status codes.

Common Mistakes

• Ignoring Non-200 Status Codes: A common mistake is to assume that any response means success. Always check the status.
• Not Catching Errors: Failing to handle errors in the `catch` block can lead to unhandled promise rejections.
• Overly Generic Error Messages: Providing vague error messages can frustrate users. Be specific when possible.
• Neglecting Network Errors: Remember that network issues can occur, and you should handle those separately from HTTP errors.

By following these best practices and being aware of common mistakes, you can effectively handle HTTP errors in your applications using the Fetch API. Proper error handling not only improves the user experience but also makes your application more robust and easier to maintain.