[javascript] Axios와 함께 사용할 수 있는 로깅 방법

21 Nov 2023

javascript

Axios는 매우 인기있는 JavaScript 라이브러리로, HTTP 요청을 처리하는데 사용됩니다. 로깅은 디버깅, 성능 분석 및 사용자 추적과 같은 목적으로 매우 중요합니다. 이 글에서는 Axios와 함께 사용할 수 있는 로깅 방법을 알아보겠습니다.

Axios 로깅 기능 활성화하기

Axios는 로깅 기능을 내장하고 있지 않습니다. 하지만 그 대신에 axios.interceptors를 사용하여 요청 및 응답을 로깅하는 기능을 구현할 수 있습니다. 이를 통해 원하는 형식으로 로그를 작성하고 로깅 레벨을 제어할 수 있습니다.

다음은 Axios 인터셉터를 사용하여 로깅 기능을 활성화하는 예제입니다.

import axios from 'axios';

// Request interceptor
axios.interceptors.request.use((config) => {
  console.log('Request:', config);
  return config;
}, (error) => {
  console.error('Request error:', error);
  return Promise.reject(error);
});

// Response interceptor
axios.interceptors.response.use((response) => {
  console.log('Response:', response);
  return response;
}, (error) => {
  console.error('Response error:', error);
  return Promise.reject(error);
});

위의 코드에서는 axios.interceptors.request를 사용하여 요청 전에 로깅을 수행하고, axios.interceptors.response를 사용하여 응답 후에 로깅을 수행합니다. 각각의 콜백 함수는 첫 번째 매개변수로 요청 또는 응답 객체를 받고, 콘솔에 해당 객체를 출력하고 해당 객체를 반환합니다.

로깅 레벨 설정하기

로깅은 프로덕션 환경과 개발 환경에서 다르게 동작할 수 있어야 합니다. 개발 환경에서는 디버깅 정보가 많이 필요하지만, 프로덕션 환경에서는 로깅이 과도하게 발생하지 않도록 해야 합니다.

Axios의 로깅 레벨을 제어하려면 다음과 같이 설정할 수 있습니다.

import axios from 'axios';

// Set logging level
axios.defaults.loggingLevel = process.env.NODE_ENV === 'production' ? 'error' : 'debug';

// Request interceptor
axios.interceptors.request.use((config) => {
  if (axios.defaults.loggingLevel === 'debug') {
    console.log('Request:', config);
  }
  return config;
}, (error) => {
  console.error('Request error:', error);
  return Promise.reject(error);
});

// Response interceptor
axios.interceptors.response.use((response) => {
  if (axios.defaults.loggingLevel === 'debug') {
    console.log('Response:', response);
  }
  return response;
}, (error) => {
  console.error('Response error:', error);
  return Promise.reject(error);
});

위의 예제에서는 axios.defaults.loggingLevel을 사용하여 로깅 레벨을 설정합니다. 개발 환경에서는 디버그 모드로 설정되어 있으므로 모든 요청과 응답이 로깅됩니다. 프로덕션 환경에서는 에러 레벨로 설정되어 있으므로 오류 발생 시에만 로깅이 수행됩니다.

결론

Axios와 함께 사용할 수 있는 로깅 기능을 활성화하고 로깅 레벨을 설정하는 방법에 대해 알아보았습니다. 이를 통해 HTTP 요청 및 응답을 추적하고 디버깅할 수 있으며, 다양한 환경에서 일관된 로깅을 수행할 수 있습니다.

Axios의 공식문서 (https://axios-http.com/)는 Axios에 대해 더 자세한 정보를 제공하고 있습니다.