[React] Errorboundary가 잡지 않는 것들

react의 에러 바운더리는 렌더링 도중 생기는 에러가 UI 전체를 깨뜨리는 것을 막기 위한 용도이다. 그래서 처음에는 막연하게 try catch 대신 선언적으로 에러 핸들링을 도와주는 컴포넌트로 인식하고 있었다.
그런데 어느날 onClick에서 에러를 던지는데 에러 바운더리에서 핸들링이 되지 않았다.

찾아보니 에러 바운더리는 다음과 같은 에러를 잡지 않는다.

• 이벤트 핸들러
• 비동기적 코드
• 서버 사이드 렌더링
• 자식이 아닌 에러 바운더리 자체에서 발생하는 에러

이벤트 핸들러에서 발생하는 에러는 렌더링 도중에 발생하는 것이 아니므로, UI가 깨지지 않기 때문에 에러 바운더리에서 잡지 않는다고 한다. 대신 try catch를 써주라고 문서에 쓰여있다.

그리고 또 하나 의아했던 점은 비동기 코드의 에러 또한 잡지 않는다는 것이다. 비동기 에러 역시 렌더링 도중에 생기는 에러가 아니기 때문에 잡지 않는다고 한다. 그런데 그동안 react-query를 이용할 때 Errorboundary를 잔뜩 써왔는데, 그것은 react-query가 내부적으로 해당 비동기 에러를 캐치하여 다음 렌더링 때 throw 해주기 때문이라고 한다.

Ref

• https://ko.reactjs.org/docs/error-boundaries.html#how-about-event-handlers
• https://tkdodo.eu/blog/react-query-error-handling