Axios interceptor로 전역에서 Error 처리하기

개선 전

Axios통신을 할 때 항상 try catch로 Error처리를 했었다.

예)

import axios from 'axios'

export const postExample = async (formData: FormData) => {
  try {
    const response = await axios.post(URL, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      withCredentials: true,
    })
    return response.data
  } catch (error) {
    console.error('에러가 발생하였습니다. 문의해주세요.', error)
    return { state: 'ERROR', message: error.message }
  }
}

근데 API가 많아지면서 리팩토링을 할 필요를 느꼈다.

예)

import axios from 'axios'

export const postExample = async (formData: FormData) => {
  try {
    const response = await axios.post(URL, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      withCredentials: true,
    })
    return response.data
  } catch (error) {
    console.error('에러가 발생하였습니다. 문의해주세요.', error)
    return { state: 'ERROR', message: error.message }
  }
}

export const postExample2 = async (formData: FormData) => {
  try {
    const response = await axios.post(URL, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      withCredentials: true,
    })
    return response.data
  } catch (error) {
    console.error('에러가 발생하였습니다. 문의해주세요.', error)
    return { state: 'ERROR', message: error.message }
  }
}

위에 보는 것 처럼 가독성도 낮아지고, 반복적인 코드를 작성하게 되어 이를 개선하고자 전역에서 에러를 핸들링 할 방법을 찾았다.

개선 후

axios기능 중에 인터셉터(Interceptor)라는 기능을 사용하면 생각보다 간단하게 전역 설정을 할 수 있다.

인터셉터란 요청(Request)또는 응답(Response)이 애플리케이션 코드에 도달하기 전이나 서버로 전송되기 전에 이를 가로채고, 그 내용을 수정하거나 처리할 수 있는 기능이다.

• 요청 인터셉터(Request Interceptor): 서버로 요청이 전송되기 전에 실행됨 (ex:모든 요청에 인증 토큰 자동 추가하거나 요청 로깅)
• 응답 인터셉터(Response Interceptor): 서버로부터 응답을 받은 후, 애플리케이션 코드가 그 응답을 처리하기 전에 실행됨(ex: 응답 데이터를 전처리하거나 에러 공통적으로 처리)

나는 서버에 요청을 보내고 난 후에 에러가 났는지 안 났는지가 궁금해서 Response Interceptor를 사용했다.

1. 전역 관리 설정

axiosConfig.ts
(파일 이름은 자유롭게 변경해도 된다.)

import axios from 'axios'

// Axios 기본 설정
axios.defaults.baseURL = `${process.env.NEXT_PUBLIC_API_URL}`

// Axios 전역 에러 처리 인터셉터
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    // 공통 에러 처리 로직
    console.error('에러가 발생하였습니다. 문의해주세요.', error)
    return Promise.reject({ state: 'ERROR', message: error.message })
  },
)
export default axios

2. Try-Catch 삭제 한 후 코드

이제 기존에 axios를 axios에서 import 했다면 이제는 Error처리가 추가된 axiosConfig.ts에서 axios를 가져다 사용하면 된다.

import axios from '../axiosConfig'

export const postExample = async (formData: FormData) => {
    const response = await axios.post(URL, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      withCredentials: true,
    })
    return response.data
}

export const postExample2 = async (formData: FormData) => {
    const response = await axios.post(URL, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      withCredentials: true,
    })
    return response.data
}

확실히 전역에서 에러 핸들링을 설정하니 반복적인 코드 작성이 필요 없어지고 가독성 또한 향상되었다.

실제 에러가 발생하면 콘솔에 밑에 이미지 처럼 표출이 된다.