Axios 에러 처리

axios.isAxiosError와 일반 catch 차이점 정리

Axios를 사용할 때:

axios 사용 후에 catch()블록에서 axios.isAxiosError(error)를 사용할지, 일반 catch (error)와의 차이가 궁금했음.

1️⃣ axios.isAxiosError(error)를 사용하는 경우

} catch (error) {
  if (axios.isAxiosError(error)) {
    console.error("Error details:", {
      status: error.response?.status,
      message: error.response?.data?.message,
      data: error.response?.data,
    });

    if (error.response?.status === 409) {
      Alert.alert("알림", error.response?.data?.message || "이미 참가 신청한 매치입니다.");
    } else {
      Alert.alert("오류", "참가 신청 중 오류가 발생했습니다.");
    }
  }
}

✅ 특징

• Axios 요청에서 발생한 에러만 처리
• error.response를 확인하여 서버에서 온 응답(예: 409, 500 등)에 따라 다르게 처리 가능
• 네트워크 에러, CORS 문제 같은 Axios 관련 에러를 특정해서 처리할 때 유용

2️⃣ 일반 catch (error)를 사용하는 경우

} catch (error) {
  console.error("에러 발생:", error);
  Alert.alert("매칭 신청에 실패했습니다.");
}

✅ 특징

• 모든 종류의 에러를 처리 (Axios 에러뿐만 아니라 코드 오류도 포함)
• error.response를 체크하지 않기 때문에 서버 응답과 무관하게 동일한 메시지를 출력
• 단순한 에러 처리에는 적합하지만, 세부적인 오류 대응이 어려움

3️⃣ 언제 어떤 방식을 써야 할까?

상황	axios.isAxiosError(error) 사용	일반 catch (error) 사용
서버에서 온 응답(status code)에 따라 다르게 처리해야 함	✅	❌
네트워크 오류(CORS, 요청 실패)만 구분해서 처리하고 싶음	✅	❌
모든 에러를 한꺼번에 처리하고 싶음	❌	✅
코드 실행 중 발생하는 일반적인 에러도 잡고 싶음	❌	✅

🔥 결론

• Axios 요청에서 발생한 에러만 다루려면 → axios.isAxiosError(error) 사용
• 그냥 모든 에러를 일괄적으로 처리하려면 → 일반 catch (error) 사용
• 상황에 맞게 적절한 방식을 선택해야 함