• When
  • 뱅크샐러드, 2021.10
• Problem
  • 컴포넌트 안쪽에 로딩, 에러 상태에 대한 로직이 섞여 있어 코드 파악 어려움
  • 로딩 에러를 처리하는 반복 로직 발생
• Action
  • react-query, suspense, AsyncBoundary 를 적용하여 에러, 로딩 상태 추상화 제안
• Impact
  • 에러, 로딩 처리 중복 제거
  • 컴포넌트 안쪽에는 성공케이스만 남아 코드 가독성 상승

자산 웹은 아래 이미지와 같은 자산의 상세 페이지를 담당합니다.

Problem Before

financialasset-web은 next.js를 사용하고, getSeverSideProps 메소드 에서 Severside Fetching 을 진행하기 때문에 서버에서 이미 api 데이터를 채워서 보내주고, 에러가 나면 바로 _error.tsx를 보여주기 때문에, 클라이언트에서 별도의 에러처리, 로딩에 대한 처리를 하지 않음 (코드링크)

query.isLoading, query.isError 등의 상태를 사용하지 않음

Problem

서버사이드 렌더링시에 에러처리의 한계

• 서버사이드에서 401 에러가 나도 notifySessionExpiration WNI를 실행할 수 없음
• 서버사이드에서 발생한 에러 로그가 sentry 에 재대로 기록이 안됨

어떻게 해결할까?