API 서버와의 통신 과정에서 발생할 수 있는 에러들과 이 에러들에 대한 적절한 처리를 통해 사용자 경험이 좋은 어플리케이션을 제공할 수 있습니다. 먼저 발생한 에러가 어떤 종류의 에러인지 파악하고 분류해야합니다. 에러가 파악되었다면 사용자가 처한 문맥에 맞게 적절한 에러처리를 진행하게 됩니다.
예제에서는 다음의 라이브러리들과 API에 대한 선수지식이 필요합니다.
- Axios
- TanStack Query
- Error Boundary
에러 정의하기
에러가 어떻게 발생할 수 있는지를 중심으로 그 종류에 대해서 정리하겠습니다. 에러의 출처를 기준으로 에러의 종류를 나눠보겠습니다.
사용자 에러
에러의 원인이 애플리케이션 사용자에게 있는 에러입니다. HTTP Status Code 중 아래의 경우로 볼 수 있습니다.
- 400: Bad Request - 잘못된 요청
- 401: Unauthorized - 인증되지 않은 사용자
- 403: Forbidden - 사용자 권한부족, 차단된 IP주소
클라이언트 에러
에러의 원인이 클라이언트 측에 있는 에러입니다. 개발단계에서 개발자의 실수로 발생할 확률이 높습니다. HTTP Status Code 중 아래의 경우로 볼 수 있습니다.
- 404: Not Found - 존재하지 않는 URL 요청
- 405: Method Not Allowed - 해당 URL로 허용되지 않은 메소드로 요청했을 때 (GET만 있는데 POST를 했다거나)
- 그 외의 400번대 에러들
서버 에러
에러의 원인이 서버에게 있는 에러입니다. HTTP Status Code 중 아래의 경우로 볼 수 있습니다.
- 500: Internal Server Error
- 502: Bad Gateway
- 503: Service Unavailable
- 504: Gateway Timeout
- 그 외 더 많은 500번대 에러들
예상치 못한 에러
서버가 응답하지 않거나 네트워크 연결이 끊어진 경우 axios에서 다음의 에러를 전달합니다.
- ECONNABORTED: 요청의 타임아웃
- ENOTFOUND: 서버를 찾을 수 없는 경우
그 외 요청 과정에서 발생하는 예상할 수 없는 에러들이 있습니다.