언마운트 때 fetch 취소하려고 AbortController를 썼는데 콘솔에 AbortError가 계속 찍혀요

Question

검색 입력창 자동완성 만들면서, 타이핑할 때마다 이전 요청을 취소하려고 AbortController를 붙였습니다. 컴포넌트 언마운트될 때도 취소하려고 cleanup에도 넣었고요.

useEffect(() => {
  const ac = new AbortController()
  fetch(url, { signal: ac.signal })
    .then(r => r.json())
    .then(setResults)
  return () => ac.abort()
}, [url])

동작 자체는 잘 됩니다. 근데 콘솔에 Uncaught (in promise) DOMException: The user aborted a request. 이게 계속 뜨네요. 특히 dev에서 컴포넌트가 처음 뜰 때부터 한 번 찍혀요. 기능은 되는데 에러가 남으니 찜찜합니다. 이거 놔둬도 되나요, 아니면 뭔가 잘못한 건가요?

김영삼 · Accepted Answer

기능은 잘 짜신 거 맞습니다. 그 콘솔 로그는 실제 버그가 아니라, abort된 fetch의 promise가 reject되는데 그걸 catch하지 않아서 나는 미처리 rejection이에요. abort를 호출하면 진행 중이던 fetch는 AbortError로 reject되는 게 정상 동작이고, 지금 코드엔 .catch가 없어서 그 reject가 콘솔로 새어나오는 겁니다.

해결은 catch를 붙이되, AbortError는 "의도한 취소"니까 조용히 무시하면 됩니다. catch에서 err.name이 'AbortError'면 그냥 return하고, 그 외의 진짜 네트워크 에러만 처리하세요. 이렇게 하면 콘솔이 깨끗해집니다.

dev에서 처음 뜰 때부터 한 번 찍히는 건 StrictMode의 이중 마운트 때문이에요. 마운트 → cleanup(여기서 abort) → 재마운트가 도니까, 첫 요청이 취소되면서 AbortError가 한 번 나는 거죠. 프로덕션에선 안 그러니 걱정 안 하셔도 됩니다. 오히려 이 로그가 cleanup이 제대로 걸려 있다는 증거예요.

fetch_gyuwon · Answer

catch에서 name 분기하니까 콘솔 깔끔해졌어요. 근데 저희 프로젝트 다른 데선 axios를 쓰거든요. axios로도 이렇게 요청 취소가 되나요? 예전에 CancelToken인가 하는 걸 본 것 같은데 지금도 그걸 쓰는 게 맞나요?

김영삼 · Answer

요즘 axios는 표준 AbortController를 그대로 지원해요. 요청 옵션에 signal: ac.signal 넘기면 fetch와 똑같이 취소됩니다. CancelToken은 예전 방식이고 지금은 deprecated라 신규 코드에선 안 쓰는 게 맞아요.

한 가지 다른 점은 취소됐을 때 잡는 방법입니다. axios는 취소되면 CanceledError를 던지는데, axios.isCancel(err)로 판별하는 게 가장 안전해요. 그래서 catch에서 isCancel이면 무시, 아니면 실제 에러 처리 이렇게 가시면 됩니다. 패턴은 fetch 때랑 동일하고 판별 함수만 바뀐다고 보시면 돼요.

fetch_gyuwon · Answer

정확히 그 부분이 궁금했는데 깔끔하게 정리됐습니다. isCancel로 바꿔둘게요. 감사합니다 🙏

댓글 4