[React] try-catch, error 타입 잡기

typescript에서 
try-catch 구문을 사용하면서

error 값을 사용하려 하면

 

 

특정 버전까지는 error의 타입이 any여서 문제가 안되었지만

이젠 unkown 이 되면서 해당 에러가 발생한다.

어떤 방법으로 해결할 수 있을까?

 

 

킹갓 any 를 사용한다

 

위처럼 error의 타입을 any로 해준다면 에러는 없어진다

역시 애니는 신이야!!

하지만.. any는 다른 케이스에서도 그렇고

타입 스크립트 사용 시 추천되는 방식은 아니다.

 

 

 

isAxiosError 타입가드 사용하기

axios에서 제공하는 타입가드를 사용할 수 있다.

 

해당 조건을 걸어주면

일반적으로 axios에서 발생하는 에러를 쉽게 케어할 수 있다.

때문에 바로 response 까지의 값을 사용할 수 있다.

 

보통 서버로 부터 받는 응답은 response.data 에 실려온다.

여기서 response는 옵셔널 한 선택지기에 response 뒤에 ? 를 붙여주어야 한다.

혹은 if 조건문에 해당 내용을 추가해 주어도 된다.

 

아래는 해당 관련 깃허브 링크이다.

 

https://github.com/axios/axios/tree/main#typescript

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

 

---

 

에러 사유를 굳이 디테일하게 노출해야하는 상황이 아니라면

try-catch 에서

error 값으로 분기를 태우기보다

실패 상황 처리만 하는 것도 하나의 팁이지 싶다.

 일반적인 팝업을

보여주는 식으로 말이다.

 

 

'서버와의 연결이 불안합니다. 잠시 후에...'

'...기능이 실패했습니다.'

등으로 말이다.

 

끝