모든 게 try, catch로 잡힐 줄 알았다.

프로젝트를 진행하면서 갑자기 mockup 서버가 많은 요청으로 터지는 일이 생겼다.

서버가 복구되기 전까지 다른 작업을 하기 위해 화면을 켰지만 잡지 못한 오류들로 인해 렌더링이 실패하며 빨간 화면으로 가득 찼다.

나는 분명 try, catch로 잡았는데?

에러 메시지와 상태 코드를 보니 400대였다.

이게 무슨 일인가 보니 요청은 잘 들어가고 내가 받은 데이터는 포스트맨에서 리턴해준 error 객체였다.

400에러는 catch에서 잡히는 것이 아니었다!

handleError라는 함수를 따로 만들어 응답 코드와 임의의 에러 메시지를 만들어 인자로 넘겨주었다.

응답 코드가 400보다 높다면 바로 에러를 던지는 것!

이렇게 에러 핸들링을 따로 해준 이후에야 제대로 된 화면을 볼 수 있었다.

아래 코드는 프로젝트를 진행하며 만들었던 코드를 이해를 돕기 위해 조금 바꾼 것이다.

const handleError = (status: number, errorText: string) => {
  if (status >= 400) throw errorText;
};

try {
  const res = await fetch(url);
  handleError(res.status, '에러! 메시지!');
  const issues = await res.json();
  return issues;
} catch (errorText) {
  throw errorText;
}