How to handle fetch errors in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Proper fetch error handling is essential for building robust applications that gracefully manage network failures, server errors, and unexpected responses. As the creator of CoreUI with extensive JavaScript experience since 2000, I’ve implemented comprehensive error handling in countless API integrations and data-driven applications. From my expertise, the most reliable approach is checking both network errors and HTTP response status codes with appropriate fallback strategies. This technique ensures applications remain functional even when network requests fail.
Check response status and use try-catch blocks to handle both network and HTTP errors properly.
async function fetchData(url) {
try {
const response = await fetch(url)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
return await response.json()
} catch (error) {
console.error('Fetch failed:', error.message)
throw error
}
}
Here the try-catch block captures network errors like connection failures or timeouts. The !response.ok check validates HTTP status codes - fetch only rejects for network errors, not HTTP error statuses like 404 or 500. The throw new Error() creates a custom error for bad status codes. This approach handles both network-level failures and server-response errors, providing comprehensive error management for API calls.
Best Practice Note:
This is the same approach we use in CoreUI components for robust data fetching and API error management. Always check response.ok in addition to using try-catch since fetch considers HTTP error statuses as successful responses that need manual validation.
