Axios Error Handling

🧯 Axios Error Handling 어떻게 고쳤는가?

에러 응답 response를 출력하려고 했으나 … undefined로 나와버리는 문제가 생겼음. 네트워크 탭에서는 에러 잘 확인할 수 있었지만 그 에러 데이터를 성공적으로 끌고오지 못했음 ㅜ

interceptors에서 에러를 처리하고 출력하는 return이 내가 생각한 것도 약간 다른 상태였다!!

💥 문제 상황 1

기존의 axios instance 코드

instance.interceptors.response.use((res) => res, handleTokenError);
instance.interceptors.response.use((res) => res, handleAPIError);

요청 후 에러가 발생하면 두 개의 인터셉터에서 각각 처리하고자 했음!

나는 두번째 handleAPIError가 필요했는데 두 번째 interceptors.response.use()는 첫 번째의 결과를 덮어쓰기 때문에, 에러가 정상적으로 전달되지 않거나 response 자체가 undefined가 되는 현상이 발생함 ㅜ

🛠 해결 방법

🔁 에러 처리 인터셉터 병합

• 두 개의 에러 핸들링 함수를 한 곳에서 처리하도록 함

instance.interceptors.response.use(
  (response) => response,
  async (error) => {
    await handleTokenError(error); 
    return handleAPIError(error);  
  }
);

이렇게 하면 에러가 한 번만 흐름을 타게 되고, catch 블록에서 정상적으로 에러 객체를 받을 수 있게 된당당

🔁 hadnleAPIError 수정

기존 코드

export const handleAPIError = (error: AxiosError<ErrorDTO>) => {
  throw error.response;
};

만약 error.response가 없을 경우 throw undefined가 되어버림! 그래서 에러 자체를 reject하도록 변경함 like this

export const handleAPIError = (error: AxiosError<ErrorDTO>) => {
  return Promise.reject(error);
};

🎯 실제 사용한 컴포넌트 try-catch 처리

catch (error) {
  const axiosError = error as AxiosError<any>;

  if (
    axiosError.response?.data.code === 400 &&
    axiosError.response?.data?.data?.message === "no_show user"
  ) {
    navigate("/");
    presentToast("노쇼를 3회 이상하여 대기가 불가능합니다.");
  }

  if (axiosError.response?.data?.data?.message === "waiting over") {
    presentToast("동시에 최대 3개 부스까지 대기 가능해요.");
  } else {
    console.error("대기 등록에 실패했어요. 다시 시도해주세요!", error);
  }
}

에러 핸들링 … 이래서 중요하구나… 를 체감함 ㅜ

번외) throw vs Promise.reject

🚨

throw는 동기적 예외 → 즉시 try-catch로 잡음
Promise.reject()는 비동기적 실패 → .catch()나 await 기반 에러 흐름에 맞음
axios나 fetch처럼 비동기 흐름에서는 Promise.reject()가 안정적!!

요약 비교 (Thanks to GPT)

구분	throw	Promise.reject()
문맥	동기 (Synchronous)	비동기 (Asynchronous / Promise 기반)
반환	예외(Exception)를 던짐	실패한 Promise 객체를 반환
사용 위치	try { ... } catch (e) { ... } 내	.then().catch() 또는 await + try/catch
axios에서 사용	❌ (인터셉터 등에서는 비추천)	✅ (비동기 흐름에 안전하게 에러 전달 가능)
에러 전파 방식	즉시 실행 중단 및 상위로 throw	비동기 체인을 따라 거부(rejection) 전파