157

I am using axios for a react application and I would like to log all axios calls that I'm making anywhere in the app. I'm already using a single global instance of axios via the create function and I am able to log a generic console.log. However I would like more info like function being called, parameters, etc.

Pavlo
  • 43,301
  • 14
  • 77
  • 113
David Choi
  • 6,131
  • 10
  • 28
  • 28

6 Answers6

305

The best way to do this would be an interceptor. Each interceptor is called before a request/response. In this case a logging interceptor would be.

axios.interceptors.request.use(request => {
  console.log('Starting Request', JSON.stringify(request, null, 2))
  return request
})

axios.interceptors.response.use(response => {
  console.log('Response:', JSON.stringify(response, null, 2))
  return response
})

or something to that effect.

It's good that you're using a new instance of axios:

const api = axios.create({
  timeout: 1000
})

That way you can call

api.interceptors[...]
T04435
  • 12,507
  • 5
  • 54
  • 54
Kevin Velasco
  • 4,568
  • 1
  • 16
  • 6
  • 5
    It will be worthy to note that without the `return response`, the code will break at the interceptor – Oniya Daniel May 16 '17 at 15:08
  • 4
    In `api.interceptors[...]`, the `[...]` part is the previously demonstrated code. They just didn't want to type `api.interceptors.request.use...` and `api.interceptors.response.use...` in the answer again. – FirstOne Jun 05 '18 at 18:54
  • 3
    I get `Type Error: Cannot read property request of undefined` in first `request` keywords of `api.interceptors.request.use(request => { console.log('Starting Request', request) return request })`. How to fix this error? – Jerry Chong Apr 29 '19 at 01:25
  • How can I make these interceptors work only during development and not in release mode? – Satyam Apr 26 '20 at 10:25
  • @Satyam I would suggest using a logger different from console.log that allows you to configure which log levels are enabled. e.g. winston. Your framework may have alternative configurable facades. – xenoterracide Jun 30 '20 at 18:09
  • Didn't know about it. You helped me a lot. Finally i fixed my code using this debugging method! Thanks!!! – MateuszWawrzynski Nov 14 '20 at 14:59
  • 1
    This gives me "circular dependency" error. Wrapping it like this fixed it: let { inspect } = require('util'); JSON.stringify(inspect(response), null, 2). Where util is a standard node package – vir us May 13 '21 at 13:11
  • 1
    The line: console.log('Starting Request', JSON.stringify(request, null, 2)) does not log the request that is sent to the server. I have seen that axios adds additional headers based on the payload after that. That can be seen in the error (error.request._currentRequest._header) if an error happens. I find that very confusing. I wonder how nobody has this question. The interceptor does not seem to show the real headers that were sent – SijuMathew Sep 10 '21 at 12:07
  • The response interceptor needs to be work with `reseponse.data` to avoid circular json issue, ```axios.interceptors.response.use(response => { logger.debug('Axios Response: %s', JSON.stringify(response.data, null, 2)); return response; });``` – nabsha Mar 07 '23 at 01:17
  • this doesn't seem to log errors – john k Jul 13 '23 at 20:26
29

Use axios-debug-log

  1. npm install --save axios-debug-log
  2. require('axios-debug-log') before any axios call
  3. Set the environment variable DEBUG=axios

By default, you'll see logs like the following:

  axios POST /api/auth/login +0ms
  axios 200  (POST http://localhost:8080/api/auth/login) +125ms
  axios POST /api/foo +0ms
  axios 200  (POST http://localhost:8080/api/foo) +15ms

Refer to the docs for configuration and customization options.

Dheeraj Vepakomma
  • 26,870
  • 17
  • 81
  • 104
  • 1
    Hi i wanted to ask where can i see this ? is it in file? axios POST /api/auth/login +0ms axios 200 (POST http://localhost:8080/api/auth/login) +125ms axios POST /api/foo +0ms axios 200 (POST http://localhost:8080/api/foo) +15ms – TechDev Dec 02 '20 at 04:32
  • 1
    where to set DEBUG =axios. could you please provide the steps (I am a beginnner) – Pooja Rajendran C Jan 13 '21 at 07:27
  • @PoojaRajendranC set that before you start the code up `DEBUG=axios server.js` in the terminal – jcollum Aug 22 '22 at 20:29
6

It looks like you can intercept all requests using an "interceptor", and log inside of it: https://github.com/mzabriskie/axios#interceptors

Jeff McCloud
  • 5,777
  • 1
  • 19
  • 21
3

Use axios-logger

When you send a request in nodejs, you need to show the log to the console.

Yusuf Mohammad
  • 71
  • 3
1

You can try wrap the axios.request function in a Promise.

function loggedRequest(config) {
  return new Promise((resolve, reject) => {
    axios.request(config)
    .then((res) => {
      // log success, config, res here
      resolve(res);      
    })
    .catch(err => {
      // same, log whatever you want here
      reject(err);
    })
  })
}
xiaofan2406
  • 3,250
  • 5
  • 26
  • 34
-9

Here's an NPM package for MySQL that let's you log all axios requests https://www.npmjs.com/package/axios-logger-mysql , I hope this helps.

kendysond
  • 11
  • 4