Handling Timeout in Axios and Why?

Handling Timeout in Axios and Why?

don't become a spectator of your own code's behavior

ยท

4 min read

Recently, I worked on an Application that uses a third party API for payment, let us call this third party API Zebra for easy flow.

Zebra had a very nice documentation which made it easy for me to quickly figure out my code and deploy, all worked well ๐Ÿ™Œ.

I was having a nice rest one evening when I got a message from my boss stating most users were complaining of not being able to log in after I deployed, I looked into it and alas it was an issue with the Zebra API which is connected to login action in a way.

Zebra does get loads of request on their server and thus, experience internal error a lot perhaps due to inadequate load balancing or scaling.

When Zebra is having this issue, it does not quickly return with say 500 Internal error but rather keep infinitely with no response, this leads to an unanticipated behavior on our server and unexpected timeout error was being thrown by our server after a long time of waiting for response which was not properly caught and user was not able to sign in and no particular error message.

So, the only reasonable solution was to set a custom timeout for my axios request so it fails as expected when Zebra is experiencing timeout which my catch block can catch and bubble apt error message to the client.

So, how do we achieve that?

We can set timeout in a few different ways. The timeout key can be used in config objects for axios โ€” wherever we can pass a request config object, we can pass a timeout value too. The config object is a common way to control how our http request would be made. We can pass headers, authentication details and many other details as part of the config objects.

A quick way to demonstrate this would be to directly use axios. methods โ€” they all take optional config values which we can use to set the timeout. Hereโ€™s a code snippet

try{
   const resp = 
     await axios.post(
          "https://abdulloooh.bin", data, {headers, timeout: 15000}
      )
}
catch(err){
   console.log(err)
   return res.sendStatus(500)
}

In the above code snippet, we used the axios.post method which takes the URL, the data to post and config options consisting of headers (and other necessary configs) then timeout. We set a timeout of 15000ms (i.e. 15s) which I know will trigger a timeout on my (average) network if Zebra keeps processing with no response.

If Zebra is down again and refused to return error, the request will automatically timeout after 15s and will be caught in the catch block.

Note that this can also be set directly in the config options if axios. is not being used such as:

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {'authentication': 'Bearer xxxx'},
  timeout: 1000,
});

Key Takeaways:

  • Set the value to timeout in a config object.
  • Timeout values are in milliseconds.
  • Timeout is response timeout not connection timeout from user's network issue.

References:

  1. github.com/axios/axios/issues/647
  2. medium.com/@masnun/handling-timeout-in-axio..
ย