How to log all axios calls from one place in code

When using Axios for API requests, you might want to log all requests for debugging, monitoring, or auditing purposes. Axios provides interceptors, which are a very effective way to uniformly log request calls. Interceptors allow us to handle requests before they are sent to the server and after responses are received from the server, but before our code processes the response.

Here is an example of using Axios interceptors to log all request calls:

javascript
import axios from 'axios';

// Create a logging function to output request and response information
const logRequestResponse = (url, method, data, response) => {
  console.log(`[Request] ${method.toUpperCase()} ${url}`, data);
  console.log(`[Response]`, response);
};

// Create an Axios instance
const api = axios.create({
  baseURL: 'https://your.api/baseurl' // Assumed API base URL
});

// Add a request interceptor
api.interceptors.request.use(
  config => {
    // Perform some processing before sending the request
    // For example, you can add an authentication token to headers here
    return config;
  },
  error => {
    // Handle request errors
    return Promise.reject(error);
  }
);

// Add a response interceptor
api.interceptors.response.use(
  response => {
    // Responses with status codes in the 2xx range trigger this function
    // Perform some actions on the response data
    logRequestResponse(response.config.url, response.config.method, response.config.data, response.data);
    return response;
  },
  error => {
    // Responses with status codes outside the 2xx range trigger this function
    // Handle response errors
    if (error.response) {
      // Server returned a non-2xx response
      logRequestResponse(error.response.config.url, error.response.config.method, error.response.config.data, error.response.data);
    } else if (error.request) {
      // Request was sent, but no response was received
      console.error(`[Axios Error] No response:`, error.request);
    } else {
      // An issue occurred while sending the request
      console.error(`[Axios Error] General error:`, error.message);
    }
    return Promise.reject(error);
  }
);

// Use the api instance to make requests
api.get('/some-endpoint')
  .then(response => {
    // Handle response
  })
  .catch(error => {
    // Handle error
  });

In the above code example, we first define a logRequestResponse function that logs the request URL, method, data, and response to the console. Then, we create an Axios instance and add request and response interceptors. In the request interceptor, we currently perform minimal processing, returning the configuration as-is; in practice, you could add authentication tokens or logging here. In the response interceptor, we call logRequestResponse to log detailed information about the request and response. If the request is successful, we log the response data; if it fails, we log different information based on the error type.

By using this method, all requests made through this Axios instance will be logged, providing a powerful tool to track API call usage.

Use axios-logger When sending requests in Node.js, output logs to the console.