서비스 접속 불가 VOC

voc로 가끔 서비스 접속이 안된다는 문의를 받는데요.

그런 VOC를 받을때마다 원인을 찾아보려고했으나, 항상 재현이 불가능했습니다.

따라서 해당 문의가 올때마다 "강력 새로고침"을 권장드렸고, 고객들도 어느 순간 접속이 된다며 채널톡 문의를 종료하곤 했습니다.

이런 상황이 반복되면서 근본적인 문제를 해결하지 못하는 점이 마음에 걸렸습니다.
그러던 도중, 운 좋게도 저 역시 동일한 문제를 경험하게 되었고 이를 통해 원인을 분석하기 시작했습니다.

미리 결론을 말하자면 tanstack-query와 Chromium 기반 브라우저의 문제였습니다.

원인 분석

1. Next.js 서버 문제인가?

처음에는 Next.js 서버가 정적 리소스(HTML, CSS)를 제대로 내려주지 않는다고 생각했다.
하지만 개발자 도구를 통해 정적 리소스가 정상적으로 로드되는 것을 확인할 수 있었다.

2. 백엔드 서버 문제인가?

다음으로는 백엔드 서버에서 특정 상황에 API 요청에 대한 응답을 주지 않는다고 의심했다.

하지만 클라이언트에서는 API 요청에 대한 타임아웃 처리와 서버 에러를 처리하는 로직이 있다.
따라서 이 케이스엔 에러 토스트 메세지를 받거나 리다이렉션 시키기때문에 서비스 접속이 불가능하진 않다.

또한, 문제가 발생한 사용자 API 요청 로그가 백엔드 서버에 아예 존재하지 않았다.

3. 진짜 사용자의 네트워크 문제가 아니였을까?

그렇다면 진짜 고객 네트워크 문제가 아닐까 생각 했다.

그러나 서비스 접속 불가 상황에서 채널톡으로 문의를 주셨기때문에, 네트워크 문제로 보기에는 무리가 있었다.

나도 재현을 해보면 채널톡 API는 정상 요청이 가능것을 확인했다.

4. 그럼 진짜 클라문제다.

위 모든 가능성을 배제한 결과, 문제는 클라이언트에서 발생한 것이 확실했다!

나는 API 관련 문제라고 생각해, TanStack Query DevTools를 확인했다.

devtools에서 특정 쿼리 상태가 paused로 나타나는 것을 발견했다.

쿼리 상태라하면 fresh, fetching, stale, inactive만 생각했었는데 paused가 있었다.

tanstack-query의 paused

그럼 paused는 뭘까?

tanstack-query는 기본적으로 사용자긔 네트워크 상태가 불안정하면 API 요청을 하지 않는데 이 상태를 paused라고한다.

하지만 나는 네트워크는 정상적으로 잘 연결되어있었다.(슬랙 접속 가능, 구글 접속 가능)

tanstack-query의 Online 상태 판별 문제

나는 일단 tanstack-query 관련 문제라고 확신하고 tanstack-query 문서와 관련 이슈를 찾아보았는데 tanstack query에는 onlineManager가 있다.

onlineManager의 inOnline으로 온라인 상태를 확인하는데 Chromium 기반 브라우저에서 오탐을 하는 문제가 있다고한다.(온라인인데 오프라인으로 탐지)

TanStack Query GitHub Discussion

TanStack Query Online Manager Documentation

진짜일까?

실제로는 네트워크가 잘 연결되어있는데 크롬에서는 isOnline 상태가 false인것을 확인했다.

Arc 브라우저에서는 isOnline 상태가 true였다.(무언가 버그가 있는게 확실하다.)

해결법

v5로 올리면 이 문제가 해결되지만 지금당장 v5로 업그레이드하기에는 많은 공수가 필요해서 QueryClient의 networkMode를 always로 수정하여 항상 API 요청을 하도록 변경했다.

 new QueryClient({
        defaultOptions: {
          queries: {
            // ... 중략
            networkMode: "always",
          },
          mutations: {
            // ... 중략
            networkMode: "always",
          },
        },
      })

tanstack-query isOnline 소스코드

문제를 해결한 뒤, TanStack Query가 온라인 여부를 어떻게 판단하는지 살펴보았다.
잘못된점이 있다면 지적해주시면 수정하겠습니다!!

canFetch

canFetch는 onlineManager의 isOnline 상태를 기반으로 요청 가능 여부를 결정한다.

canFetch 메서드에서는 onlineManager의 isOnline으로 fetch 여부를 확인을 하는것을 확인할 수 있다.

내가 사용하는 v4에서는 online의 기본 상태가 없다.
따라서 최초에는 offline으로 인식한다.

v5에서는 이 문제를 해결하기 위해 online의 기본 상태가 true로 설정되어있다.
그리고 setOnline 메서드로 상태가 변경되면 상태 변경 후, listeners에게 알려주는 로직으로 구성되어 있다.

결론

사실 서비스 접속이 불가능한것 치곤 아주 간단한 해결법이였지만 문서를 찾아보지않았다면 절대 해결 못하지 않았을까? 생각합니다.

다시 한번 공식문서의 중요성을 깨닫게 되었습니다.

tanstack-query의 isOnline 오탐문제였다.
위의 처리를 한 후 더이상 서비스 접속 불가 voc는 받지 않고 있다.