클라이언트에서 에러 처리하기(2) - Error Boundary

이예슬·2022년 12월 16일

에러 바운더리 에러 처리

ErrorBoundary

ErrorBoundary란?

react16에서 도입
하위 컴포넌트 트리의 자바스크립트 에러를 포착하여 에러가 발생했을 경우 Fallback UI를 보여줄 수 있다.(선언적 에러 처리 가능)
class 형식으로만 구현할 수 있다. ⇒ hooks에서 지원하는 방식으로는 오류 발생 시 제어할 방법이 없어서!
- getSnapshotBeforeUpdate : 가장 마지막으로 렌더링 된 결과가 DOM 등에 반영되었을 때 호출
- getDerivedStateFromError : 하위의 자손 컴포넌트에서 오류가 발생했을 때 render 단계에서 호출, 오류를 인자로 받음
  
  ⇒ render() 가 실행되기 전에 호출 Virtual DOM에 영향을 끼칠 수 있는 작업은 하면 안됨
- componentDidCatch : 하위의 자손 컴포넌트에서 오류가 발생했을 때 commit 단계에서 호출, 해당 오류와 어떤 컴포넌트가 오류를 발생시켰는지에 대한 정보를 가진 componentStack key를 포함한 객체를 인자로 받음
  
  render 단계: React가 DOM 갱신이 일어날 때 이전과 이후를 비교하며 변경 사항을 계산하는 단계
  
  commit 단계: React가 비교를 끝내고 DOM에 직접적으로 갱신될 내용을 적용하는 단계
  
  ⇒ getDerivedStateFromError 단계에서 에러를 확인 hasError의 상태를 true로 변경하고 ErrorPage 를 렌더링하도록 구성한다.
  
  ⇒ sentry와 같은 로깅 로직을 사용하고 싶을 경우 componentDidCatch 단계에서 호출하면 된다.

ErrorBoundary를 사용하는 이유

에러/예외 케이스 화면들

👉 일반적인 에러, 네트워크 에러, 강제 업데이트, 서비스 점검

위와 같은 에러 케이스를 모두 axios interceptor로 처리하게 될 경우 에러 화면을 보여주기 위해 라우트를 이동하여야 함
전역 에러를 처리하는 것은 수월하나 화면의 일부만을 에러 상태로 대응하는 것은 어려움

위의 방식대로 여러 정보를 표시하는 화면에서 하나의 api 에러가 발생했을 때 에러 페이지로 이동한다면 사용자 경험이 저하될 것이다.

Error boundary를 이용하면 이와 같은 문제를 개선할 수 있다.

➕ suspense의 대수적 효과
- 함수는 필요한 코드 조각을 선언적으로 사용
- 실제 관련된 처리는 컴포넌트를 감싸는 부모 함수에 위임(코드 조각을 감싸는 맥락으로 책임을 분리하는 방식(대수적 효과)
- 컴포넌트의 특정 역할을 분리해 특정 컴포넌트를 감싸는 부모 컴포넌트에게 위임할 수 있다. (suspense는 로딩 UI를 표시하고 error boundary는 에러 UI를 표시한다)

Error boundary의 한계

이벤트 핸들러 이벤트 핸들러는 컴포넌트의 렌더링 단계와는 연관이 없다. 따라서 생명주기 메서드로 잡아낼 수 없고, try catch 구문을 이용하여 처리해야 한다. 단 react-query 를 사용하면 useErrorBoundary 옵션을 이용하여 API 에서 발생시 Error Boundary가 캐치할 수 있도록 할 수 있다.
비동기적 코드 마찬가지로 비동기 콜백으로 부터 발생하는 에러도 확인이 불가능하다. 위와 같은 경우에는 응답을 기다렸다가 오류가 발생했을 때 컴포넌트 단계에서 에러를 throw 시켜주면 error boundary가 확인이 가능하다.
서버 사이드 렌더링
자식에서가 아닌 에러 경계 자체에서 발생하는 에러