This article is intended to suggest a better way to handle errors when using async/await syntax. Prior knowledge of how promises work is important.
From Callback Hell to Promises
Callback hell makes your code drift to the right instead of downward due to multiple nesting of callback functions.
I wont go into details of what callback hell is, but I'll give an example of how it looks.
User profile example 1
// Code that reads from left to right
// instead of top to bottom
let user;
let friendsOfUser;
getUser(userId, function(data) {
user = data;
getFriendsOfUser(userId, function(friends) {
friendsOfUser = friends;
getUsersPosts(userId, function(posts) {
showUserProfilePage(user, friendsOfUser, posts, function() {
// Do something here
});
});
});
});
Promises
Promises were introduced to the Javascript(ES6) language to handle asynchronous operations better without it turning into a callback hell.
The example below use promises to solve callback hell by using multiple chained .then
calls instead of nesting callbacks.
User profile example 2
// A solution with promises
let user;
let friendsOfUser;
getUser().then(data => {
user = data;
return getFriendsOfUser(userId);
}).then(friends => {
friendsOfUser = friends;
return getUsersPosts(userId);
}).then(posts => {
showUserProfilePage(user, friendsOfUser, posts);
}).catch(e => console.log(e));
The solution with promise looks cleaner and more readable.
Promises with with async/await
Async/await is a special syntax to work with promises in a more concise way.
Adding async before any function
turns the function into a promise.
All
async
functions return promises.
Example
// Arithmetic addition function
async function add(a, b) {
return a + b;
}
// Usage:
add(1, 3).then(result => console.log(result));
// Prints: 4
Making the User profile example 2
look even better using async/await
User profile example 3
async function userProfile() {
let user = await getUser();
let friendsOfUser = await getFriendsOfUser(userId);
let posts = await getUsersPosts(userId);
showUserProfilePage(user, friendsOfUser, posts);
}
Wait! there's a problem
If theres a promise rejection in any of the request in User profile example 3
, Unhandled promise rejection
exception will be thrown.
Before now Promise rejections didn't throw errors. Promises with unhandled rejections used to fail silently, which could make debugging a nightmare.
Thank goodness promises now throws when rejected.
Google Chrome throws:
VM664:1 Uncaught (in promise) Error
Node will throw something like:
(node:4796) UnhandledPromiseRejectionWarning: Unhandled promise rejection (r ejection id: 1): Error: spawn cmd ENOENT
[1] (node:4796) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
No promise should be left uncaught. - Javascript
Notice the .catch
method in User profile example 2
.
Without the .catch block Javascript will throw Unhandled promise rejection
error when a promise is rejected.
Solving this issue in User profile example 3
is easy. Unhandled promise rejection
error can be prevented by wrapping await operations in a try...catch block:
User profile example 4
async function userProfile() {
try {
let user = await getUser();
let friendsOfUser = await getFriendsOfUser(userId);
let posts = await getUsersPosts(userId);
showUserProfilePage(user, friendsOfUser, posts);
} catch(e) {
console.log(e);
}
}
Problem solved!
...But error handling could be improved
How do you know with error is from which async request?
We can call a .catch
method on the async requests to handle errors.
User profile example 5
let user = await getUser().catch(e => console.log('Error: ', e.message));
let friendsOfUser = await getFriendsOfUser(userId).catch(e => console.log('Error: ', e.message));
let posts = await getUsersPosts(userId).catch(e => console.log('Error: ', e.message));
showUserProfilePage(user, friendsOfUser, posts);
The solution above will handle individual errors from the requests, but its a mix of patterns. There should be a cleaner way to use async/await without using .catch
method (Well, you could if you don't mind).
Here's my solution to a better async/await error handling
User profile example 6
/**
* @description ### Returns Go / Lua like responses(data, err)
* when used with await
*
* - Example response [ data, undefined ]
* - Example response [ undefined, Error ]
*
*
* When used with Promise.all([req1, req2, req3])
* - Example response [ [data1, data2, data3], undefined ]
* - Example response [ undefined, Error ]
*
*
* When used with Promise.race([req1, req2, req3])
* - Example response [ data, undefined ]
* - Example response [ undefined, Error ]
*
* @param {Promise} promise
* @returns {Promise} [ data, undefined ]
* @returns {Promise} [ undefined, Error ]
*/
const handle = (promise) => {
return promise
.then(data => ([data, undefined]))
.catch(error => Promise.resolve([undefined, error]));
}
async function userProfile() {
let [user, userErr] = await handle(getUser());
if(userErr) throw new Error('Could not fetch user details');
let [friendsOfUser, friendErr] = await handle(
getFriendsOfUser(userId)
);
if(friendErr) throw new Error('Could not fetch user\'s friends');
let [posts, postErr] = await handle(getUsersPosts(userId));
if(postErr) throw new Error('Could not fetch user\'s posts');
showUserProfilePage(user, friendsOfUser, posts);
}
Using the handle
utility function, we are able to avoid Unhandled promise rejection
error and also handle error granularly.
Explanation
The handle
utility function takes a promise as an argument and always resolves it, returning an array with [data|undefined, Error|undefined]
.
- If the promise passed to the
handle
function resolves it returns[data, undefined]
; - If it was rejected, the
handle
function still resolves it and returns[undefined, Error]
Similar solutions
Conclusion
Async/await has a clean syntax, but you still have to handle thrown exceptions in async functions.
Handling error with .catch
in promise .then
chain can be difficult unless you implement custom error classes.
Using the handle
utility function, we are able to avoid Unhandled promise rejection
error and also handle error granularly.
Top comments (37)
Why bother capturing a thrown exception only to pass it up the call stack by return value so the caller has to explicitly check for it when you could use much simpler conventional exceptions mechanics?
You are returning a promise in your
else_throw
function, which means you still need to catch/handle promise rejections with a.catch
method or try...catch block inside ofuserProfile
functionThe use-case below will throw
Unhandled promise rejection
in any JS environmentThanks for your feedback.
You have a bug on line:
Change to:
The original example also allows errors to propagate from
userProfile
, but that's not the point of your post. Your post is about adding context to async errors. You would want to handle it at the call site touserProfile
. You'd handle it intest()
. The same is true of the code from the post.Thank you for pointing the bug out.
It's just an example, you can decide to return a http response assuming it's an API server. Also propagating error is not bad else an error from a node library will return an error as a return value instead of throwing, which could cause a lot of issues in your program.
From your example
On this line
const user = await getUser();
Assuming
user
fails with a rejection,user
variable will be assigned anError
object. Without the user data whats the point of callinggetFriendsOfUser(user)
andgetUsersPosts(user)
with an Error object?In scenarios like this
throwing
or returning a response will be a better way to deal with the resulting error fromgetUser
request than to pass it to another function to deal with it.Lets say you pass
user
which contains anError
object togetFriendsOfUser(user)
it'll result to an error inside ofgetFriendsOfUser
function sincegetFriendsOfUser
is expecting a user object and not anError
object, so instead of your program to throw an error aboutuser details not found
, it'll probably cause a totally different error inside ofgetFriendsOfUser
. Imagine scenarios like this all over your codebase, it'll be difficult to debug.If you intend to handle errors when
userProfile
is called, then you'll need to check results from yourawait
calls if its an instance ofError
, then you'll also check if return value ofuserProfile()
is an instance ofError
then do whatever with theError
object.I'm in favour of handling errors where they occur and/or propagating to the top.
user
will not be assigned to an instance ofError
andgetFriendsOfUser()
will not be called in the case wheregetUser()
rejects becauseawait
will cause the program to throw out ofuserProfile()
. The error will propagate upward from theawait
ing function and will have a message indicating thegetUser()
call failed.I would caution you against handling all errors where they occur. You're not necessarily wrong to do that, but be careful not to use that as a hard and fast rule everywhere. Errors should be handled only where the program should take a specific action. This will vary on a case by case basis. In this case, the specific action is to swap one error for another, (but the error is not otherwise handled).
Before I make my next point, I want to say that I like what you're trying to do and I appreciate that you are giving serious thought to patterns that implement exception policy. I wish more devs did that. Don't stop thinking about ways to abstract away and standardize exception handling behavior because every program has that problem.
My code and yours more or less do the same two things: replaces a low level error with another containing context about
userProfile()
's intentions; and causes early exit ofuserProfile()
. What's true of one program's error handling behavior is true of the other in terms of outcome.The caller does not have to check the return value of
userProfile()
because it's using conventional error propagation paths. This means the caller could usetry
/catch
within anasync function
thatawait
s the call touserProfile()
or by using.catch()
on the promise returned byuserProfile()
. The caller's option to not handle the error and allow the error to continue propagating normally is also preserved.The main problem with your proposal is that it defeats a major benefit of using
async function
, which is being able to write async code that is not cluttered by explicit error handling.This benefit can be seen in my version because the body of
userProfile()
contains no explicit error handling, contains no branching (objectively less complex code), and the errors propagated say whatuserProfile()
was doing at the time of the error.My version could arguably be improved by creating the decorated versions of
getUser()
(and the others) in the body ofuserProfile()
instead of at program initialization and adding some dynamic context to the error messages (like user name or whatever is useful to capture in the log).Your approach is also good.
I understand your intention from this response.
When I tested your
else_throw
helper with a promise rejection, it returned and error object instead of throwing, which was the reason for my response. Unless I didn't test properly.If it throws as expected then your approach will be a great alternative.
I must have forgotten to have it throw from the
.catch()
callback. I intended for it to throw.Yeah. That should be it.
Why not only do this?
using
throw
inside.catch
is the way to go to stop execution of the function. It's like our oldif (err) return;
❤️I'm not clear with this, but you could
throw
inside of.catch
to propagate it if you like.Your example has syntax error though.
Complaining about syntax error is just really showing how little you want to take in what people say. The solution is what you do, but less complicated. And your idead is stolen from another guy who also commented here. And by the way, your solution don't have a userId so :)
Sorry if my response came off that way. We have lots of beginners that might copy your example and not know why it's not working, that was why I pointed out the syntax error(It was unnecessary).
I didn't steal my post from that guy.
I got my
handle
function solution from a youtuber, which I linked to his article at the end of my post. I also linked an npm package "await-to" that did similar implementation.If you want to accuse me of stealing, you should at least be correct with the origin of my solution.
Original source of my solution
Also I've been writing JavaScript for 8years, I don't need to steal a post to write about Promises/asynchronous JavaScript.
Pretty neat solution!. The only thing I changed was that the data is returned in the second position and the error in the first position. This way the developer is forced to at least think about handling the error.
Great solution! I've adapted it for TypeScript and added a defaultError so the error isn't falsy when not provided.
thanks!! you rock
Sorry to drop a comment on an article from last year, but I have just been looking at ways to handle awaited Promise rejections. With source code not having to look like output code (with the help of Babel and/or Webpack) one way to handle Promise rejections would look something like this ...
let response = await fetchSomething() catch (error) { ... }
A plugin with AST access could convert that to something along the lines of ...
let response; try { response = await fetchSomething() } catch (error) { ... }
I agree that something needs to be done though otherwise we will end up in a situation where JavaScript source code is saturated with try/catch blocks. More and more APIs are returning Promises these days, even Node has started to do it.
This is a great approach.
I don't do this checks in my controllers when writing production code.
I mostly use my
handle
function when I have no control over what is returned from an asynchronous request/operations.I'll experiment with your approach and probably write a post on it.
I have been trying to come around to using promises "correctly" and moving away from using callbacks, where catching errors was usually a bit more elegant in my opinion.
I'm still sort of yearning for callbacks and using async but I suppose that is in the past now.
Your
handle
function really nails it for me, it was just what I was looking for. Great post and explanation :)why you put
Promise.resolve
in catch function?is ok.
I agree, there's no reason for putting
Promise.resolve
in thecatch()
.You are much much better off just using #catch at the top level caller.
What an odd coincidence, as I too posted an article about Promise error handling, with an example that uses a hypothetical user profile interface. It was about five days before this one was posted. May I assume it served as some sort of inspiration? Granted, your aim here is very different, so I'm surely not accusing you of copying me. Just curious.
linkedin.com/pulse/promise-promise...
Have you read the follow-up, which was posted a few days later?
linkedin.com/pulse/waiting-good-co...
Note that uncaught rejections do not throw in Chrome, at least not at this time with the version I have. They log an error to the console, which is not nearly as useful for debugging.
I haven't seen your post as I don't use LinkedIn(I'm not proud of it). I'll check out your post though.
I think you will find it useful. I guess we just had similar ideas for the hypothetical functions in similar subject matter.
Google suggested I check out your article the day after I posted my follow-up. Enjoy!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.