문제

에러가 발생하였을 떄 api 요청을 계속하며, retry error boundary의 fallback으로 넘겨준 컴포넌트가 뜨지 않는다.

해결 과정

원인이 뭔데?

현재 우리는 @suspensive/react-query를 사용하고 있다. @suspensive/react-query는 react-query에서 로딩과 에러 핸들링을 편하게 할 수 있도록 확장된 라이브러리이다.

grouping 페이지에서는 400을 날리며 에러 처리가 되고 있는데, profile페이지에서만 위와 같이 403에러를 날리며 무한 로딩이 일어난다.

원인

axios instance에서 문제가 있었다.

if (
    error.response.status === AUTH_ERROR_CODES.EXPIRED_TOKEN_ERROR ||
    error.response.status === AUTH_ERROR_CODES.TOKEN_ERROR
  ) {
//	~에러핸들링
	}

위 에러 처리에서 에러를 날리지 않고 계속 재요청을 하고 있었다.

• 기존 코드

  return privateApi(prevRequest);
  

• 수정 코드

  Promise.reject(new Error('요청 도중 에러 발생'));
  

결론

다른 곳에서 문제인 줄알고 다른 곳에서 디버깅을 계속 했다. grouping 페이지에서는 에러 처리가 되고, profile페이지에서만 안된다는 것이 이상하게 여겨, custom api가 문제임을 생각해냈다.

다음부터는 에러가 발생하면 원인을 찾기 위해 이런 저런 시도를 많이 해보자.