React의 Error Boundary는 왜 비동기 에러를 잡지 못하나요?
분야: 프론트엔드
React의 Error Boundary는 비동기 코드에서 발생한 오류를 잡을 수 없습니다. 그 이유는 비동기 에러는 렌더링 시점의 콜스택이 모두 비워진 후에 발생하기 때문입니다.
React는 컴포넌트를 렌더링할 때 하나의 연속된 콜스택 흐름 안에서 작업을 처리하며, Error Boundary도 이 렌더링 흐름 중에 실행됩니다. 따라서 Error Boundary는 동기적인 렌더링 과정 중에 발생한 오류를 감지할 수 있습니다.
하지만 Promise, setTimeout과 같은 비동기 작업은 렌더링이 끝난 후, 즉 렌더링 시점의 콜스택이 모두 비워진 후에 수행됩니다. 따라서 Error Boundary는 해당 시점에 발생하는 오류를 잡을 수 없습니다.
이러한 점 때문에, 비동기 에러는 별도로 직접 처리해야 합니다. 예를 들어, 비동기 함수 내부에서 try-catch로 감싸서 에러를 핸들링할 수 있습니다. 또는, setState를 이용해 에러 상태를 관리하거나, 이를 활용해 동기 에러를 다시 던져 에러 바운더리가 감지하도록 만들 수 있습니다.