Feat#215.에러 바운더리

[coddingyun]

요약 (Summary)

에러 바운더리를 통해 에러 발생시 오류 페이지가 나타나도록 구현하였습니다.

목표 (Goals)

렌더링 시 발생하는 오류에 대하여 오류 페이지가 나타나도록 합니다.

이외 고려 사항들 (Other Considerations)

• Error 컴포넌트가 피그마 상에서 그룹으로 합쳐져 있지 않아, 임의로 묶어 svg icon으로 만들었는데 왼쪽 패딩이 크게 잡혀 현재 화면에서 디자인과 다르게 보입니다. 이에 대하여 디자이너님께 문의드렸으나 여행 이슈🥲로 추후에 수정할 예정입니다.
• 또한, 달달쇼핑 홈으로 가기 버튼 대신에 다시 시도하기 버튼을 구현하였습니다. 크게 두가지 이유가 있는데,
  • useNavigate를 사용하려면 ErrorBoundary를 router 내에 사용해야하는데 코드가 이쁜(?) 형태는 아니라고 판단했습니다.
  • React query에서도 Error Boundary가 적용되는데, 데이터 페칭에서 오류가 날 경우에 다시 데이터 페칭을 시도해보는 것이 더 자연스러운 플로우라고 생각했습니다.
    (이 부분 또한 추후 디자이너님과 상의 예정입니다! 또 다른 의견이 있으시면 피드백 주세요)

[ShinYoung-Kim]

useNavigate를 사용하기 위해서 router 내에 있을 필요는 없는 것으로 알고 있습니다. (실제로 이전 프로젝트에서 routing 컴포넌트 외부에 error boundary를 사용했고, 홈으로 가기 / 뒤로 가기가 잘 동작하는 것을 확인하였습니다. ☺️)

에러 바운더리와 리액트 쿼리에서의 에러바운더리의 경우 옵션을 통해 제어할 수 있어서 개발자의 의도대로 사용하실 수 있습니다.

이렇게 말씀드리는 이유는, 현재 제작한 에러 바운더리는 예상하지 못한 에러를 사용자가 마주쳤을 때를 대비하기 위해 만들어졌기 때문에, 저희가 미처 알지 못한 이유로 에러가 나는 경우라고 생각합니다. 실제로 제가 겪었던 대표적인 예시는 유저만 볼 수 있는 페이지인데 토큰이 만료된 경우가 있었습니다. 토큰 만료에 대한 처리를 해놓지 않아서 유저는 자꾸 에러 페이지를 보게 되었는데요, 해당 페이지를 계속 새로고침하여도 유저는 계속 에러 페이지만을 만나게 될 것입니다. 하지만, 홈으로 가기를 만든다면 적어도 해당 오류 상황을 벗어나게는 할 수 있습니다. 그래서 저는 에러 바운더리에서 벗어나는 버튼으로 홈으로 가기를 제안드리고 싶습니다.