서버가 열리고 다시 한번 로그인 기능을 시도했을 때 또 다시 이전 문제가 또 생겼습니다.

401 에러가 정말 0.0001초 뜨고 다시 한번 자동 리다이렉트 되는 문제가 또 생겼습니다.

이유를 찾기 위해 또 다시 코드를 다 뒤져본 결과,

queryClient.ts의 handleApiError에서 여전히 401 에러 발생 시 즉시 리다이렉트하는 코드가 존재했습니다.

export const handleApiError = (error: unknown) => {
  if (error instanceof AxiosError && error.response?.status === 401) {
    window.location.href = '/login';
    return { shouldRedirect: true, path: '/login' };
  }
};

이 코드를 삭제했다고 생각했으나, 또 다시 살아있었습니다.

이에 다시 삭제를 진행했습니다.

이제 자동 리다이렉트 문제가 해결되고 정상적으로 진행되나 싶다가, 또 한번 문제가 발생했습니다.

401에러가 발생하고(정상)

직후 갑자기 500에러가 바로 발생합니다(비정상)

401에러 이후 Error: 가입하지 않은 유저입니다. 회원가입 해야 합니다. 는 백엔드에서 설정한 오류 이름이라 저 오류가 나는 것 까지는 정상입니다.

이후 생기는 500에러가 문제입니다.

해결

if (error.response?.status === 401 && originalRequest && !originalRequest._retry) {
  return await handle401Error(originalRequest);
}

기존에 401 에러시 토큰 갱신을 시도하는 코드(handle401Error)로 인해, 문제가 있었습니다.

기존에 해당 코드 및 handle401Error를 작성했던 이유는, 정상적인 퀴즈 풀기및 여러 컨텐츠를 하는 로직에서 얘기치못하게 401에러가 나면, 토큰을 갱신하게 하는 역할을 하게하기 위해서였습니다.

하지만 로그인 기능 자체에서 401 에러에 토큰을 리프레시하는 것은 말이 안되고, 의미가 없습니다.

이에 예외처리를 해주었습니다.

if (
      originalRequest?.url?.includes('/user/login') ||
      originalRequest?.url?.includes('/auth/refresh')
    ) {
      console.log('로그인 관련 요청 - 토큰 갱신 시도하지 않음:', originalRequest?.url);
      return Promise.reject(error);
    }

로그인 시나리오와 함께, 리프레시 로직 자체에도 예외 상황으로 취급하여

리프레시 → 401 → 리프레시 → 401 무한반복… 상황이 생기지 않도록 예외처리 해 주었습니다.

그러나 여전히 문제가 존재했습니다. 다시한번 고민하고 코드를 분석하며 예상치 못한 곳에서 해결책을 찾았습니다.

queryClient에서 default 옵션으로 mutation retry값을 1로 고정해두었습니다. 아마, 에러를 맞이하고 자동으로 계속 한번더 시도를 하고, 인터셉터에서 재시도하고 생긴 에러에 대해 토큰 갱신?도 시도하고 이러한 상황이 꼬여서 500 에러가 생기지 않았나 생각합니다.

 mutations: {
      retry: (failureCount, error) => {
        if (
          error instanceof AxiosError &&
          error.response?.status &&
          error.response.status >= 400 &&
          error.response.status < 500
        ) {
          return false;
        }
        return failureCount < 1;
      },
    },

mutation 의 retry default값을 다음과 같이 설정해, 4xx에러에 대해 재시도 하지 않게 조정했습니다.

이후 다음과 같이 정상 로직을 확인할 수 있었습니다.

정상적으로 캐릭터 생성 페이지로 이동하고, 별다른 오류도 더이상 생기지 않습니다.