How to handle async/await errors in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Proper error handling in async/await functions is essential for building resilient applications that gracefully manage network failures, API errors, and unexpected exceptions. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented comprehensive async error handling in numerous data-driven applications and API integrations. From my expertise, the most reliable approach is wrapping await calls in try-catch blocks to capture and handle promise rejections appropriately. This technique provides clean error handling while maintaining the readable async/await syntax.
Use try-catch blocks around await calls to handle promise rejections and asynchronous errors.
async function fetchUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const userData = await response.json()
return userData
} catch (error) {
console.error('Failed to fetch user data:', error.message)
throw error
}
}
Here the try block contains all await operations that might fail, including the fetch call and JSON parsing. The catch block captures any errors thrown by these operations, including network failures, HTTP errors, or JSON parsing errors. The manual check for !response.ok throws an error for bad HTTP status codes since fetch doesn’t reject on HTTP error responses. This comprehensive approach handles all types of async errors in one place.
Best Practice Note:
This is the same approach we use in CoreUI components for robust API error handling and graceful failure management. Always validate response status manually with async/await since fetch only rejects for network errors, not HTTP error status codes like 404 or 500.
