Error.js

중첩된 경로에서 런타임 오류를 적절하게 처리할 수 있는 방법. 경로 세그먼트와 그 하위 중첩된 항목들을 자동으로 Error Boundary로 래핑함. 계층 구조에 따라 특정 세그먼트에 맞는 Error UI를 만들어 내고 전체 페이지를 로드하지 않고 오류 복구를 시도하는 기능을 추가할 수 있음. error.js 파일에서 내보낸 컴포넌트는 오류가 발생하면 대체 UI로 사용됨. 반드시 client component로 만들어야 함

위는 사용법이 아님. 실제로 저렇게 변화가 된다는 것을 표현한 사진. 공식문서 참 헷갈리게 써놓았네..

<aside> 💡 Error Boundary가 layout 컴포넌트 내부에 중첩되기 때문에 error.js는 같은 세그먼트의 layout.js 컴포넌트의 에러를 잡아내지 못함. 이를 위해선 global-error.js를 사용해야 함

</aside>

'use client' // Error components must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
 
  return (
    <div>
      <h2>에러가 발생했어요!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        다시 시도
      </button>
    </div>
  )
}

서버 에러 핸들링

서버 컴포넌트 내부에서 에러가 발생하면 Next.js는 Error 객체를 가장 가까운 error.js파일에 error props로 전달함. 프로덕션 중 클라이언트로 전달된 오류 객체에는 일반 메시지와 다이제스트 속성만 포함되는데 잠재적으로 민감한 세부 정보가 클라이언트에 유출되는 것을 방지하기 위한 예방 조치.

내 프로젝트에 적용

내 블로그 시작 페이지에는 각각의 API 요청을 담은 서버 컴포넌트가 3개가 있음. 위와 같이 error.js 파일로 에러 핸들링을 한다면 하나의 Error Boundary에 래핑되어 한 개의 요청이라도 에러를 발생시키면 모든 요소를 못 보는 상황이 생김

<aside> 💡 React의 Error Boundary는 에러의 경계를 정해주는 컴포넌트

</aside>

이 문제를 해결하기 위해 각각의 컴포넌트를 따로 Error Boundary로 래핑하기로 결정하여 react-error-boundary 라이브러리를 사용하기로 함

<aside> 💡 Error Boundary는 함수형으로 작성할 수 없어 클래스 형태로 작성해야 하지만 react-error-boundary를 사용하면 따로 Error Boundary 구현 없이 바로 사용할 수 있음

</aside>

<section>
  <div>
    <div>
      <article>
        **<ErrorBoundary FallbackComponent={ErrorUI}>**
          <Suspense fallback={<LoadingUI />}>
            <Weather />
          </Suspense>
        **</ErrorBoundary>**
      </article>
      <article>
        **<ErrorBoundary FallbackComponent={ErrorUI}>**
          <Suspense fallback={<LoadingUI />}>
            <MyCheckList />
          </Suspense>
        **</ErrorBoundary>**
      </article>
    </div>
    <article>
      **<ErrorBoundary FallbackComponent={ErrorUI}>**
        <Suspense fallback={<LoadingUI />}>
          <NewArrivals />
        </Suspense>
      **</ErrorBoundary>**
    </article>
  </div>
</section>