Common Mistakes in JavaScript Async Function Error Handling

Neo Liu
Neo Liu
Dec 10, 2019 · 3 min read
Source from Wikimedia Commons

Error handling is super important in JavaScript flow control to prevent your program crashes from unexpected exceptions. We use try...catch statement marks a block of statements to try, and specifies one or more responses should an exception be thrown. If an exception is thrown, the try...catch statement catches it.

For a synchronous function in JavaScript, the error handling is pretty straightforward and easy-to-understand. In the example shown above, the error thrown from innerFn will be finally caught by try…catch statement in testFn, and the output to the console will be like the code below:

Error caught:  Error from Synchronous Fn

This is because the error originated from throw Error("Error from Synchronous Fn") will first look for try…catch statement in innerFn, and if it doesn’t get handled inside innerFn scope then the uncaught error will be thrown to innerFn call’s outer scope —the testFn’s scope.

However, if you think you can use the same trick on handling an error originated from an async function, then you will be making a big mistake. Let’s see the code below:

Try it yourself and you will see the result below, an uncaught error output to console:

Uncaught (in promise) Error: Error from Asynchronous Fn

What causes the different behavior?


1. Error thrown from async function is a rejected promise

In the async error hanlding example, the error thrown from throw Error("Error from Asynchronous Fn") is equivalent to:

async function innerAsyncFn(){  
return Promise.reject(Error("Error from Asynchronous Fn"));
}

For a rejected promise wrapping an uncaught error, we have two options to handle it:

(1) Use .catch() chain function to catch the error within the promise chain.

In this case, you’re treating the thrown error as a rejected promise in your testFn’ scope by chaining it with a .catch() function. You’ll see the out put below:

Promise chain .catch():  Error from Asynchronous Fn

(2) Change testFn to an async function and use await to wait for the resolution of the rejected promise.

In this case, the returned rejected promise will be resolved to an uncaught error in testFn’s scope, and the uncaught error will be caught by try…catch block. You’ll see the output in console:

Error caught:  Error from Asynchronous Fn

2. Async function as a param

Now you’ve learnt the rules of async function error handling:

Now based on our learning, let’s see some complicated use case of passing an async function as a parameter into a function handler, and how we can do the error handling when the function handler is either synchronous or asynchronous.

(1) handler function is synchronous:

async as a param — error handling — sync handler function

(2) handler function is asynchronous:

async as a param — error handling — async handler function

Wrapping Up

Now you should have a deeper understanding of async function’s error handling. The examples shown above is only used for demonstrating the essence of the asynchronous function error handling process. In real projects, the situation will be much more complicated because we don’t know what type of the handler function is and how it will treat our async functions. So, the safest way is always put your logic inside a try…catch block in your async function.

If you’ve learnt anything from this post, please don’t hesitate to give me a clap. Your support is always important for me.

Cheers and thanks for reading!

Other Posts:

JavaScript in Plain English

Learn the web's most important programming language.

Neo Liu

Written by

Neo Liu

I am always on the way of learning. I like writing articles because it helps me re-organise and consolidate my learnings.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade