Bits of .NET

⚠️ Fetch API = Error Handling

Async requests fail. Error handling makes them robust. Network errors, timeouts, server errors — handle all.

📝 Error Handling Patterns

// Fetch with error handling
async function fetchData(url) {
    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) {
        // Network errors
        if (error.name === 'TypeError') {
            console.error('Network error:', error);
            showUserMessage('Network error. Please check your connection.');
        }
        // HTTP errors
        else if (error.message.includes('HTTP error')) {
            console.error('HTTP error:', error);
            showUserMessage('Server error. Please try again later.');
        }
        // JSON errors
        else if (error instanceof SyntaxError) {
            console.error('Parse error:', error);
            showUserMessage('Invalid response from server.');
        }
        // Other errors
        else {
            console.error('Unexpected error:', error);
            showUserMessage('An unexpected error occurred.');
        }
        
        throw error; // Re-throw for caller
    }
}

// Retry logic
async function fetchWithRetry(url, maxRetries = 3) {
    for (let attempt = 0; attempt < maxRetries; attempt++) {
        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error(`HTTP ${response.status}`);
            return await response.json();
        } catch (error) {
            if (attempt === maxRetries - 1) throw error;
            console.log(`Retry ${attempt + 1}/${maxRetries} after error: ${error.message}`);
            await new Promise(r => setTimeout(r, 1000 * (attempt + 1)));
        }
    }
}

// Timeout
async function fetchWithTimeout(url, timeout = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);
    
    try {
        const response = await fetch(url, { signal: controller.signal });
        clearTimeout(timeoutId);
        return response.json();
    } catch (error) {
        if (error.name === 'AbortError') {
            throw new Error('Request timed out');
        }
        throw error;
    }
}

🎯 Error Handling Tips

# Common Errors
- Network errors
- HTTP errors (4xx, 5xx)
- Timeout errors
- JSON parse errors

# Best Practices
- Always handle network errors
- Check HTTP status codes
- Implement retry logic
- Show user-friendly messages
- Log errors for debugging

# User Feedback
function showUserMessage(message) {
    // Show error to user
    const errorEl = document.getElementById('error');
    errorEl.textContent = message;
    errorEl.style.display = 'block';
}

# Error Types
fetch('/api/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => {
        if (error.name === 'TypeError') {
            console.log('Network error');
        } else if (error.name === 'AbortError') {
            console.log('Request aborted');
        } else {
            console.log('Other error:', error);
        }
    });

💡 Error Handling Tips

• Always handle network errors
• Check HTTP status codes
• Implement retry logic
• Show user-friendly messages
• Log errors for debugging