Error Boundary

리액트에서 에러 핸들링하기

• 여러가지 에러/ 예외 케이스들이 있을 때 오류가 발생하면 axios interceptor를 사용해서 일괄적으로 라우트 이동을 시켜서 에러 핸들링을 하고 있었음 -> 1/ 라우트 이동으로 처리해야만하는 불편함, 2/ 전역 에러를 처리하는 것은 수월하나 화면의 일부만 에러 상태로 대응하는 것은 어려웠음

• 반환되는 HTTP 코드로 네트워크 에러, 타임아웃 에러, 계정이상 에러 체크로 구분

→ React ErrorBoundary 도입

React ErrorBoundary?
error boundaries를 활용하여 하위 컴포넌트 트리의 자바스크립트 에러를 포착하고 FallBack UI를 보여줄 수 있음
에러 바운더리를 통해 선언적 에러 처리가 가능함

에러 바운더리의 기본적인 구조

.
.
.
// 다음 렌더링에서 Fallback UI가 보이도록 상태 업데이트
  static getDerivedStateFromError(error: Error) {
    return { error }
  }

// 에러 리포팅 서비스에 에러 기록
  componentDidCatch(error: ErrorType, info: ErrorInfo) {
    const { onError } = this.props

    onError?.(error, info)
  }

// 커스텀한 fallback UI 렌더링
  render() {
    const { children, renderFallback } = this.props
    const { error } = this.state

    if (error != null) {
      return renderFallback({
        error,
        reset: this.resetErrorBoundary,
      })
    }

    return children
  }

.
.
.

라이브러리

react-error-boundary:
에러 바운더리의 fallback component를 직관적으로 작성할 수 있도록 도와주는 라이브러리

react-query와 에러바운더리

useErrorBoundary 옵션을 제공하여, API에서 에러가 발생하면 이를 에러바운더리가 캐치할 수 있음

도입 후 액션

1. axios interceptor에서 처리하는 코드 삭제
   -> 일괄 처리 했던 부분을 삭제하고 에러 바운더리에서 처리하도록 setTimeOut => reject

2. 에러 바운더리 관심사 분리
   -> 에러 발생 시 하위 에러바운더리에 먼저 접근함, 관심사별로 분리하기 위해 api에서 발생하는 에러, 그외 프론트엔드 에러로 중첩으로 구성함

3. fallBack Component 작성
   -> 에러 발생시 local로 띄워주는 UI 컴포넌트 작성

   
   

---