118

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
  • 40,007
  • 13
  • 74
  • 108
David Choi
  • 4,941
  • 10
  • 27
  • 27

6 Answers6

237

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
  • 10,027
  • 3
  • 49
  • 51
Kevin Velasco
  • 3,738
  • 1
  • 13
  • 6
  • 4
    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
    What the hell is `api.interceptors[...]`? – Georgii Oleinikov Jan 05 '18 at 11:09
  • 3
    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
  • 1
    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
  • 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
  • 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
24

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
  • 19,992
  • 13
  • 70
  • 98
  • 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
5

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,421
  • 1
  • 15
  • 21
2

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,132
  • 3
  • 23
  • 34
1

Use axios-logger

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

Yusuf Mohammad
  • 41
  • 2
-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
  • 1
  • 4