<React> Error boundary

적용하는 이유

서비스 내부에서(Client Side) 발생하는 모든 에러를 감지할 수 있도록 수정

Error Boundary 적용

• Use react-error-boundary library
  • https://github.com/bvaughn/react-error-boundary#readme

참고자료

https://nextjs.org/docs/pages/building-your-application/configuring/error-handling

https://velog.io/@sarang_daddy/React-Error-Boundary

---

작업중 이슈

• 500 에러 이후, 다른 페이지로 이동이 되지 않음
  • 에러 감지시에 GlobalErrorBoundary.tsx 컴포넌트를 띄우는 것이기 때문에, router 경로가 변경되어도 사라지지 않는 이슈가 있었음
  • 버튼 클릭 시에 새로고침되며 메인 페이지로 돌려보내도록 적용

---

GlobalErrorBoundary vs Next.js _error.tsx

Q. 🙋‍♂️ 전역 에러바운더리로 에러를 처리하면, Next.js _error.tsx는 어느 상황에 사용할 수 있게 되는 것인가?

전역 에러바운더리와 _error.tsx는 동일하다고 생각하고 있는데 잘 못된 생각인 것 인가?

A .📒 전역 에러 바운더리와 Next.js의 _error.tsx는 에러를 처리하는 방법이 다르며, 사용되는 상황도 다르다.

이 두 가지는 서로 보완적인 역할을 하며, 특정 시나리오에서 각각의 장점을 살려 사용할 수 있습니다.

1. 전역 에러 바운더리 (ErrorBoundary)

ErrorBoundary는 React 컴포넌트 내에서 발생하는 런타임 에러를 처리하기 위해 사용됩니다.

클라이언트 사이드에서 발생하는 에러를 잡아내며, 특정 컴포넌트 트리에서 에러가 발생할 경우 이를 잡아 사용자에게 대체 UI를 보여줄 수 있습니다.

사용 상황:

• React 컴포넌트가 렌더링 중에 발생하는 에러를 처리할 때.

• 특정 컴포넌트 트리(예: )에서 발생하는 에러를 처리하여, 그 하위 컴포넌트가 에러로 인해 중단되지 않도록 할 때.

• 에러 발생 시 사용자에게 대체 UI를 제공하거나, 에러를 로깅할 때.

제한 사항:

• 서버 사이드 렌더링(SSR)에서 발생하는 에러는 잡아내지 못합니다.

• Next.js의 페이지 레벨에서 발생하는 에러(e.g : getServerSideProps, getStaticProps, getInitialProps 등)

도 처리하지 않습니다.

2. _error.tsx (Next.js의 Error Page)

_error.tsx는 Next.js에서 전역적으로 사용되는 에러 페이지로, *클라이언트 사이드 및 서버 사이드에서 발생하는 에러를 처리합니다.* 이 페이지는 Next.js에서 기본적으로 제공하는 에러 처리 메커니즘으로, 서버 사이드에서 발생한 에러도 포함됩니다.

사용 상황:

• Next.js의 페이지 레벨에서 발생하는 에러를 처리할 때.

• 예를 들어, getServerSideProps나 getStaticProps에서 데이터 페칭 중 발생한 에러를 처리합니다.

• 서버 사이드에서 발생한 에러를 사용자에게 알릴 때.

• 404 페이지나 500 페이지를 커스터마이징할 때.

• 404, 500과 같은 HTTP 상태 코드를 기반으로 사용자에게 에러 페이지를 보여줄 때.

제한 사항:

• 특정 컴포넌트 트리 내에서 발생하는 에러를 잡아내지 못합니다. 이는 ErrorBoundary가 처리해야 합니다.

요약

• ErrorBoundary는 React 컴포넌트 트리에서 발생하는 런타임 에러를 처리합니다.
이는 클라이언트 사이드에서 발생하는 에러를 처리하는 데 유용합니다.

• _error.tsx는 Next.js의 전역 에러 페이지로, 서버 사이드에서 발생하는 에러와 Next.js의 페이지 레벨에서 발생하는 에러를 처리합니다. 또한 404와 같은 상태 코드를 기반으로 한 에러 처리에도 사용됩니다.

따라서 이 둘은 서로 다른 목적을 가지고 있으며, 함께 사용할 때 애플리케이션의 에러 처리 능력을 극대화할 수 있습니다. ErrorBoundary는 UI 컴포넌트에서의 에러를 잡아내고, _error.tsx는 전체 페이지 수준에서 발생하는 에러를 처리하는 역할을 합니다.

작업 결과

클라이언트 사이드에서 발생하는 에러를 감지하면 보여줄 GlobalErrorBoundary.tsx와, API에서 Error를 반환하면 보여줄 대체 컴포넌트인 APIErrorFallback.tsx를 만들어서 에러 핸들링을 진행했다.

api에서 error를 반환받았을 때, 대체 컴포넌트를 띄우고 api 재요청