How can I handle errors effectively in TypeScript when using the Fetch API?

How can I handle errors effectively in TypeScript when using the Fetch API?

You can use try-catch blocks along with the Fetch API to handle errors. Here's a basic example:

async function fetchData(url: string) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error; // Rethrow or handle it as needed
    }
}

What should I do if the error is due to network issues?

For network issues, you can check if the error is an instance of the TypeError. Here's how you can modify the catch block:

catch (error) {
    if (error instanceof TypeError) {
        console.error('Network error:', error);
    } else {
        console.error('Fetch error:', error);
    }
    throw error;
}

Can I create a custom error class for better error handling?

Yes, creating a custom error class can help you manage different error types more effectively. Here's an example:

class FetchError extends Error {
    constructor(message: string, public status?: number) {
        super(message);
        this.name = 'FetchError';
    }
}

// Usage in fetchData function
if (!response.ok) {
    throw new FetchError(`HTTP error! status: ${response.status}`, response.status);
}