React Error Boundary가 비동기 에러를 잡지 못하는 이유는 무엇인가요?

Error Boundary의 포착 범위를 렌더 콜스택 안/밖이라는 정확한 축으로 가르는지, 그리고 그 경계를 넘은 비동기 에러를 어떻게 다시 React 흐름으로 끌어오는지까지 설계할 수 있는지를 본다.

1. 01Error Boundary가 잡는 입력(렌더·라이프사이클·생성자의 동기 예외)과 출력(getDerivedStateFromError/componentDidCatch)을 짚는다
2. 02Promise·setTimeout·이벤트 핸들러가 렌더 콜스택 이후 태스크 큐에서 실행되어 경계 밖에 놓이는 과정을 설명한다
3. 03비동기 에러를 try-catch나 .catch()로 잡아 상태로 끌어올리거나 throw 시점을 렌더 안으로 옮기는 패턴을 제시한다
4. 04Error Boundary로 못 막는 영역(SSR, 자기 자신, 이벤트 핸들러)과 전역 핸들러·모니터링과의 책임 분담을 정리한다

• 데이터 패칭 라이브러리(SWR·React Query)의 에러를 어디까지 Error Boundary로 끌어올릴지 정해야 하는 화면
• 결제·폼 제출처럼 비동기 실패가 곧 사용자 액션 실패로 이어져 fallback UX가 명확히 필요한 흐름
• 백그라운드 폴링·웹소켓처럼 실패해도 화면을 통째로 갈아엎으면 안 되는 비동기 작업
• Sentry 같은 모니터링과 React Error Boundary가 동시에 켜져 있어 중복 로깅·누락을 정리해야 하는 환경

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.