How to Handle Errors in Async Await in JavaScript

To handle errors in async/await in JavaScript, wrap your await calls inside a try/catch block. This catches any errors thrown during the asynchronous operation, letting you handle them gracefully.

Why This Happens

When you use await with a promise that rejects, the error is thrown like an exception. If you don't catch it, your program crashes or the error goes unhandled.

javascript

async function fetchData() {
  const response = await fetch('https://invalid-url');
  const data = await response.json();
  console.log(data);
}

fetchData();

Output

Uncaught (in promise) TypeError: Failed to fetch

The Fix

Use a try/catch block around your await calls to catch errors. This way, you can handle errors without crashing your program.

javascript

async function fetchData() {
  try {
    const response = await fetch('https://invalid-url');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error.message);
  }
}

fetchData();

Output

Error fetching data: Failed to fetch

Prevention

Always wrap await calls in try/catch blocks or handle errors with .catch() on promises. Use linting tools like ESLint with rules that warn about unhandled promises. Consider creating reusable error handling functions to keep code clean.

Related Errors

Common related errors include unhandled promise rejections and syntax errors from missing async keywords. To fix unhandled rejections, always handle errors with try/catch or .catch(). For syntax errors, ensure your function is declared with async before using await.

Key Takeaways

Always use try/catch blocks around await calls to catch errors.

Unhandled promise rejections cause runtime errors and should be avoided.

Use linting tools to detect missing error handling in async code.

Remember to declare functions async before using await inside them.

Handle errors gracefully to keep your app stable and user-friendly.