DEV Community

Cover image for Handling Asynchronous Errors Like a Pro

Handling Asynchronous Errors Like a Pro

Lisandra on February 26, 2024

Asynchronous operations, such as fetching data from external APIs or handling user interactions, introduce complexities that demand error handling ...
Read full post
Collapse
 
atscub profile image
Abraham Toledo •

Interesting post. Personally, I prefer the try catch approach. I try to avoid the promise.then syntax since it can be hard to understand the execution flow.

Collapse
 
lexlohr profile image
Alex Lohr •

I prefer a mix of both await and .then/.catch, since try-catch is usually outside of the promise chain, so you cannot pinpoint where the error happened unless you wrap every single promise in a try-catch-block, which breaks the reading flow:

const data = await fetch(url)
  .catch((error) => ({ msg: "request failed", error })
  .then(r => r.json())
  .catch((error) => ({ msg: "request malformed", error }));
Enter fullscreen mode Exit fullscreen mode
Collapse
 
atscub profile image
Abraham Toledo •

Good point! Never thought about it.

Collapse
 
lisichaviano profile image
Lisandra •

You have a good point. Actually, depending on the context, each approach may offer distinct advantages.

Collapse
 
adderek profile image
Maciej Wakuła • • Edited

I love this. Though would add a bit. You should handle process.on and things like sigterm. You should use a context of the call. Async local storage is your friend. Either promise or async (async is a promise under the hood) and don't mix with callbacks. Callback that returning rejected promise throwing an error is a nightmare. Don't catch any error and make sure that error leads to action. Often I prefer server to crash because this enforces user/operator to solve the issue while handled messages are often neglected (if it works then errors are ignored even if "payment failed" but you were able to pick item from the shop).
Now imagine the ugly code

server.listen('/fail', (req, res) =>{
   return new Promise(resolve=>{
       resolve(() =>{
           res.send(()=>{
               return Promise.resolve(() =>
                  process.on('unhandledError', () =>
                     throw new Error(() =>res.set('error', true)
                  )
                  return true
           })
       } ) 
   }) 
}) ;
Enter fullscreen mode Exit fullscreen mode

I am not sure if the above works - just wanted to show how a nightmare can look like.
Oh... And it should fail in the delayed error handling failing to send headers that were already sent.

Collapse
 
citronbrick profile image
CitronBrick •

Thank you for introducing me to the unhandledRejection event.

Collapse
 
lisichaviano profile image
Lisandra •

Glad to help!

Collapse
 
sim-la profile image
SL •

Nice post thank you 👏
In browsers or JS runtimes that implement the Web API one could use addEventListener("unhandledrejection", eventHandler).
Also I often need to implement retry strategies for my async functions (in case of network error or else). I came up with a tiny utility called Tentative that simplifies the process: github.com/sim-la/tentative, but I'll be curious to hear what others use for handling retries in async functions.