글 쓰는 시간

문제 발생

Next.js와 TS를 쓰면서 프로젝트를 진행하고 있었다.

axios로 API 요청을 하고 서버에서 내려주는 에러 메시지를 이용해 에러 핸들링을 하려고 했다.

try ~ catch 문을 이용해 error를 잡고, error 객체의 message를 이용하려고 하니 아래와 같은 컴파일 에러가 발생했다.

console.log를 찍어보면 error 객체는 아래처럼 분명 존재한다.

문제 해결

JS를 쓸 때는 타입 체크를 하지 않기 때문에 사용에 문제 없었지만 

TS에서는 쓰면 error가 unknown 타입이라 error 객체의 프로퍼티로 바로 접근할 수 없다.

여러 방법이 있겠지만 axios에서 제공하는 isAxiosError라는 내부 메서드를 이용했다.

일종의 조건문으로 타입 좁히기를 하는거라고 생각하면 될것 같다.

아래의 else if문처럼 try ~ catch문 안에서 특정 조건에 따라 특정 에러 객체를 반환하도록 설정하거나

혹은 axios 인스턴스 내에서 인터셉터로 에러를 던지도록 하고 catch문 내에서 분기 처리하면 여러 에러 상황을 핸들링 할 수도 있다.