Axios interceptors — Log requests and responses

Axios interceptors

When working on node.js projects, many people reach out to third-party libraries for HTTP clients. Even though there is a solid built-in HTTP client library there is still a good reason for avoiding it. The built-in one is quite low level and requires dealing with streams making it a bit harder to start with and working in general (not sure what I’m talking about ? check out my other post ). One of those third-party libraries is Axios. When compared to the node built-in HTTP client library, Axios provides a way superior developer experience. It abstracts away all the low-level complexity and offers a simple, uniformed interface across HTTP methods. Although many axios features are worth discussing in this post we will focus on the concepts of interceptors.

What is an interceptor?

In the context of HTTP clients and node js, an interceptor is a function that in some way modifies or processes an HTTP request. The Axios library has support for modifying/processing requests in two different points in time before a request is sent and, after the request is completed but NOT yet handled by the caller.

Use-cases

There are plenty of ways we could use interceptors. To name a few:

• Log request and response
• Modify request headers, for example, attach Authorization
• Attach correlation id
• Retry request if the server responds with a retriable status code, for example, 503
• etc.

Logging request and response

In this example, we explore logging useful request information. However, the core concept stays the same and can be easily ported to any of the other use-cases examples provided in the text above. Without further ado, here is a barebone implementation:

Barebone implemntation — Source code: https://gist.github.com/sabljakovich/d6a0369af750ecf96b76ce56f5474908

However the the response contains a lot of info that is not really useful for logging purposes.

Logs with a lot of useless information

Making the log output a bit more readable:

Output useful information — Source code: https://gist.github.com/sabljakovich/0a4dd8cdc0042cb06c5d75e919e73993

The above changes result in the following output:

Clean log output

On the side note, Axios allows you to have different instances of the client. To further explore when it comes in handy, let’s say our order services need to talk to two other services, customer and catalog via HTTP. Now, we have requirements to log all requests and responses to go from the order to the customer but requests from the order to catalog service should not log responses (for example, the catalog responses are too big). What we could do is to have two different instances of axios clients.

Using interceptors with multiple client instances

Not that the customerHttpClient has only the request interceptor attached, as per the requirement that responses should not be logged.

Conclusion

In conclusion, interceptors are a simple, yet powerful mechanisam to add useful features to your HTTP clients.