Handling Fetch Errors

The Two Types of fetch Errors

When working with fetch, it's crucial to understand that there are two fundamentally different kinds of errors. Confusing them is a very common mistake for developers.

1. Network Errors: These happen when the browser cannot complete the request at all. This could be due to a lost internet connection, a typo in the domain name, or other network-level issues. In this case, the fetch promise is rejected.

2. HTTP Status Errors: These happen when the network communication is successful, but the server responds with a code indicating an error. For example, 404 Not Found (we asked for a resource that doesn't exist) or 500 Internal Server Error (something went wrong on the server). In this case, the fetch promise is resolved, because from a network perspective, a response was successfully received.

The following article brilliantly explains this distinction, which is the foundation for proper error handling.

Upgrading to async/await with try...catch

In the last lesson, we used .then() and .catch() to handle our fetch promise. This is a valid approach, but modern JavaScript offers a cleaner and more readable syntax called async/await. Since we are now dealing with more complex logic (like checking for errors), it's a good time to upgrade.

• An async function is a function that is designed to work with asynchronous operations.
• The await keyword can be used inside an async function to pause execution until a promise is resolved.
• The try...catch statement allows us to "try" a block of code and "catch" any errors (rejected promises) that occur.

The try...catch block elegantly handles the first type of error: Network Errors.

The video below demonstrates how to convert a .then() chain into an async/await structure and how the try...catch block works.

The Best Practice: Combining try/catch and response.ok

Now we know how to handle both types of errors separately. The best practice is to combine them into a single, robust pattern that handles everything in one place.

1. Wrap the fetch call in a try...catch block to handle network errors.
2. Inside the try block, immediately after getting the response, check if it was successful using the response.ok property. This property is true for HTTP statuses in the 200-299 range.
3. If !response.ok (the response was not ok), we will manually throw a new error. This immediately stops the execution of the try block and jumps to the catch block.

This way, both network errors and HTTP status errors are handled in the same catch block, centralizing our error logic.

This combined strategy is the most important takeaway of this lesson. The following video explains this pattern for async/await very clearly.

Let's Update Our Project

Now it's time to apply this to our AI Writing Assistant. We are going to refactor our script.js to use async/await and implement this robust error handling.

First, let's modify the submit event listener in static/js/script.js. We need to make the event listener's function async so we can use await inside it.

// in static/js/script.js

// Make the function async
textForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    const userText = document.getElementById('user-text').value;
    const data = { text: userText };

    // Start a try...catch block
    try {
        const response = await fetch('/api/analyze', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        // CHECK FOR HTTP STATUS ERRORS
        if (!response.ok) {
            // If the server response is not ok, create and throw an error
            throw new Error(`Server responded with status: ${response.status}`);
        }

        // If response is ok, parse the JSON
        const responseData = await response.json();
        
        console.log('Success:', responseData);

        const resultHTML = `
            <h3>Analysis Complete</h3>
            <p>Word Count: ${responseData.word_count}</p>
            <p>Character Count: ${responseData.char_count}</p>
        `;
        resultContainer.innerHTML = resultHTML;

    } catch (error) {
        // CATCHES NETWORK ERRORS AND THROWN ERRORS
        console.error('Error during fetch:', error);
        // In the next lesson, we will display this error to the user
    }
});

How to Test This:

1. Test the HTTP Status Error (404): Temporarily change the URL in the fetch call from '/api/analyze' to '/api/this-does-not-exist'. Run your app, submit some text, and open the browser's developer console. You should see your custom error message logged: Error during fetch: Error: Server responded with status: 404.

2. Test the Network Error: This one is a bit trickier to simulate, but you can do it by opening your browser's developer tools, going to the "Network" tab, and setting the throttling to "Offline". Now try to submit the form. You should see a different error logged in the console, something like TypeError: Failed to fetch, which is our network error being caught. Remember to set the network back to "No throttling" when you're done!

if (!response.ok) {
    // Try to get more details from the response body
    const errorData = await response.json(); 
    // Throw an error that includes the server's message
    throw new Error(errorData.error || `Server responded with status: ${response.status}`);
}

Conclusion

Great job! You've taken a massive step toward building a professional, reliable web application. Handling errors isn't the most glamorous part of development, but it's one of the most important for creating a good user experience.

Key Takeaways:

• There are two types of fetch errors: Network Errors (promise is rejected) and HTTP Status Errors (promise is resolved).
• async/await with a try...catch block is a clean, modern way to handle asynchronous code and network errors.
• The response.ok property is essential for checking for HTTP status errors.
• The best practice is to combine these: use try/catch and throw new Error() if !response.ok to handle all errors in a single catch block.

You now have the power to catch errors. In our next lesson, we will learn how to communicate those errors to the user by displaying a friendly message on the page and implementing a loading indicator to improve the user experience during API calls.