문제상황

• 아래와 같은 느낌으로 코드를 작성했다.

function onClick = async () => {
  try {
    await fetch("www.apiadress.com/api/auth/signup". {
      method: "POST",
      body: JSON.stringfy(mollu);
    };
  	router.push("/confirm");
  } catch (error) {
  	console.log(error);
    router.push("/");
  }
}

• 이 코드로 200계열 이외의 응답을 받으면 오류처리가 되어 홈으로 돌아갈 것이라 생각했다.
• 하지만 라우팅 주소는 "/comfirm"이였고, 흰 오류화면이 출력되었다.

원인

• MDN 가이드에 아래와 같은 내용이 있다.
  fetch() 프로미스는 네트워크에 오류가 있었거나, 서버의 CORS 설정이 잘못된 경우 TypeError로 거부됩니다. 그러나 이 두 경우는 권한처럼 설정의 문제고, 404와 같은 응답은 네트워크 오류가 아니므로 거부하지 않습니다. fetch()가 성공했는지를 정확히 알아내려면 프로미스의 이행 여부를 확인한 후, Response.ok (en-US) 속성의 값이 true인지도 확인해야 합니다.
• 즉 네트워크 연결이 실패하거나, CORS 설정을 잘못하면 오류가 발생하지만, 단순히 서버에서 400, 500대 응답을 보낸 것 만으로는 오류처리를 완전히 했다고 할 수 없다.

해결책

• 코드를 다음과 같은 식으로 수정해주자.
• 서버에서 에러발생시 body에 error속성을 통해 에러 메시지를 전한다고 가정해보자.

function onClick = async () => {
  try {
    const result = await fetch("www.apiadress.com/api/auth/signup". {
      method: "POST",
      body: JSON.stringfy(mollu);
    };
  	if (!result.ok) {
      const { error } await result.json()
      throw new Error(error);
    }
  	else router.push("/confirm");
  } catch (error) {
  	console.log(error);
    router.push("/");
  }
}

출처:
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch#%EC%B7%A8%EB%93%9D_%EC%84%B1%EA%B3%B5_%EC%97%AC%EB%B6%80_%ED%99%95%EC%9D%B8