데이터를 불러와서 사용하는 컴포넌트를 Suspense와 ErrorBoundary로 감싸서 데이터 로딩이나 에러 발생 시 각각 로딩 컴포넌트와 에러 페이지를 보여주도록 했습니다.
react-query의 retry 기능을 이용해서 408(timeout) 에러 발생 시에는 3번 재요청 후 에러 페이지를 보여주고, 그 외의 에러는 재요청 없이 에러 페이지를 바로 보여주도록 설정했습니다.
컴포넌트에서 로딩, 에러 처리 로직을 분리함으로써 데이터를 불러오는 컴포넌트는 데이터를 불러오고 사용하는 데에만 집중할 수 있게 되었습니다.
추후 리팩토링을 통해 데이터를 불러오는 query 로직도 분리 예정입니다.
스크린샷
에러 페이지는 상태코드와 홈 이동 버튼을 보여주도록 간단하게 구성하였습니다.
작업사항
데이터 fetch 시 로딩, 에러 처리에 Suspense, ErrorBoundary 적용
408 에러 발생 시 3번 재요청 후 에러 상태로 변환
에러 페이지 구현
정해둔 path 외의 다른 주소로 접속 시 404 에러 페이지를 노출하도록 설정
리뷰 요청사항
페이지마다 보여주고 싶은 로딩바 위치가 다르거나 에러 페이지 노출 여부가 달라서 페이지별로 Suspense, ErrorBoundary를 필요한 부분에 배치하거나 제외시켰습니다. 예를 들어 Main 페이지에서는 Suspense / ErrorBoundary를 적용하지 않거나 다른 fallback을 보여주는 식으로 대체하였습니다. 현재 방식이 괜찮은지, 혹시 더 좋은 방식이 있을지 조언 부탁드립니다.
혹시 테스트 중 에러나 로딩(suspend)이 잡히지 않는 부분이 있다면 제보 부탁드립니다.
개요
데이터를 불러와서 사용하는 컴포넌트를 Suspense와 ErrorBoundary로 감싸서 데이터 로딩이나 에러 발생 시 각각 로딩 컴포넌트와 에러 페이지를 보여주도록 했습니다.
react-query의 retry 기능을 이용해서 408(timeout) 에러 발생 시에는 3번 재요청 후 에러 페이지를 보여주고, 그 외의 에러는 재요청 없이 에러 페이지를 바로 보여주도록 설정했습니다.
컴포넌트에서 로딩, 에러 처리 로직을 분리함으로써 데이터를 불러오는 컴포넌트는 데이터를 불러오고 사용하는 데에만 집중할 수 있게 되었습니다. 추후 리팩토링을 통해 데이터를 불러오는 query 로직도 분리 예정입니다.
스크린샷
에러 페이지는 상태코드와 홈 이동 버튼을 보여주도록 간단하게 구성하였습니다.
작업사항
리뷰 요청사항