Unit testing을 진행하던 도중 404 등의 서버에서 에러를 전송했을 때 처리할 수 있는 코드가 없다는 것을 발견했다. 이를 해결하기 위해 stackoverflow를 한참 검색했고 방법을 찾았다.

.catch를 이용한 기존의 코드

---

다음은 .catch를 적용한 기존의 코드이다.

const email = {
      sendEmail: this.state.email,
    };
    fetch("api/Sendmail", {
      method: "post",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify(email),
    })
      .then((res) => res.json())
      .then((json) => {
        if (!json) {
          alert("이미 가입된 메일입니다.");
        } else {
          alert("인증 메일이 전송되었습니다.");
          ...
        }
      })
	.catch((err) => console.log('err: ', err));

"이렇게 하면 try ~ catch 문처럼 동작하여 에러를 잡아낸다." 라고 알고있었다. 이 에러에 4xx, 5xx 에러도 포함되는 것으로 알고 있었지만 typeError로만 거부되어 .catch에 걸리지 않는다. 이를 해결하려면 직접 오류를 체크해야 합니다.

에러 직접 핸들링

---

fetch(url).then((response) => {
 if (response.ok) {
   return response.json();
 } else {
   throw new Error('network error');
 }
})
.then((responseJson) => {
 // 정상적인 동작시 코드를 입력하면 됩니다.
})
.catch((error) => {
 console.log(error)
});

res.ok 필드를 확인하여 http 통신에 에러가 발생하였을 경우 에러를 핸들링할 수 있다.
혹은 아래 코드처럼 직접 response.statusCode들을 확인하는 방법도 있다.
에러일 경우에는 throw new Error('error'); 를 사용하고
데이터 없음일 경우에는 return []; 를 사용한다.

fetch(url)
  .then((response) => {
    if (response.statusCode === 404) {
      ...
    } else if (response.statusCode === 200) {
      return response.json();
    } else {
      throw new Error("Unexpected Http Status Code");
    }
  })
  .then((responseJson) => {
    // 정상적인 동작시 코드를 입력하면 됩니다.
  })
  .catch((error) => {
    console.log(error);
  });

추가적인 응답코드

---

상태코드	뜻
200	OK (정상, 데이터 있음)
204	No Contents (정상, 데이터 없음)
301	Moved Permanently (리다이렉션)
400	Bad Request (실패, 클라이언트에서 넘어온 파라미터가 이상함)
401	Unauthorized (실패, 클라이언트에서 넘어온 보안 토큰이 이상함)
403	Forbidden (실패, 사용자의 권한으로 리소스를 사용할 수 없음)
404	Not Found (실패, 데이터가 있어야 하나 없음)
410	Gone (실패, 데이터가 있었으나 삭제됨. 이건 굳이...?)
500	Internal Server Error (실패, 서버 로직 문제)
501	Not Implemented (실패, 없는 리소스 요청)