How can I correctly catch errors from an async function in JavaScript?

Below is an explanation with code samples.

Explanation

An async function always returns a promise. When you call an async function without awaiting its result, errors that occur inside the function (even when using await) are “stored” in the returned promise. A synchronous try...catch block will not catch errors that occur asynchronously unless you await the function call.

There are two correct approaches to handling errors in an async function:

1. Place the try...catch inside the async function:

   JAVASCRIPTCopied
   async function myFunction() {
     try {
       await someObject.methodThatReturnsPromise();
       await aFunctionThatReturnsPromise();
     } catch (e) {
       // Handle error here
       console.error("Error caught inside myFunction:", e);
     }
   }
   
   myFunction(); // no additional error handling needed here

2. Handle the error when calling the async function:

   If you don’t include a try...catch inside the function, you need to catch the promise rejection when calling the function:

   JAVASCRIPTCopied
   async function myFunction() {
     await someObject.methodThatReturnsPromise();
     await aFunctionThatReturnsPromise();
   }
   
   myFunction().catch((error) => {
     // Handle error here
     console.error("Error caught when calling myFunction:", error);
   });

What’s Incorrect in the Tutorial Example

The tutorial's example uses a try...catch block around the call to myFunction() without awaiting its result:

JAVASCRIPTCopied
try {
  // ...
  myFunction();
  // ...
} catch (e) {
  // error handling code
}

This will not catch errors from myFunction() because:

• myFunction() starts running asynchronously, and its error (if any) ends up as a rejection of the returned promise.
• The synchronous try...catch block does not see that asynchronous error.

Thus, to catch errors properly, you must either use one of the approaches mentioned above.

Summary

• Place a try...catch inside the async function to catch errors from await calls.
• Alternatively, use .catch() when calling the async function or await it inside another try...catch.
• The tutorial example is incorrect for catching asynchronous errors with a synchronous try...catch.

Using either method will ensure that errors occurring in asynchronous operations are properly handled.