fetch의 에러처리 문제

 

프로젝트를 진행하다가 아래와 같은 오류가 계속해서 생겼다.

나는 프로젝트에서 만약 없는 내용의 문서 주소로 이동하게되면 NotFound 컴포넌트를 출력하려고 했는데

계속해서 에러를 화면에 나타냈다.

 

그러면 지금 try catch에서 에러를 못잡고 있다는 건데,

내 코드는 아래와 같았다.

여기서 지금 404 에러를 못잡는다는 것이다.

그래서 나는 검색을 하게 됐고 아래 링크에서 알게되었다.

 

 

https://velog.io/@yukyung/fetch%EC%9D%98-%EC%97%90%EB%9F%AC%EC%B2%98%EB%A6%AC-%EC%9D%B4%EC%95%BC%EA%B8%B0

fetch의 에러처리 이야기

 

 

fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다.
 HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다. ㅡ MDN

 

전혀 몰랐다.

그래서 만약 res.ok가 false일 때에 404 처리를 해줘야하는 것이었다.

그래서 아래와 같이 코드를 바꾸고 에러를 상위로 보내줬다.

 

 

 

fetch에 대해서 아직 잘 몰랐던 것 같았다..