에러 핸들링을 위한 컴포넌트 추가 및 적용 #546

solo5star · 2023-10-08T09:43:38Z

#️⃣ 연관된 이슈

resolve #540

📝 작업 내용

에러 핸들링을 위한 컴포넌트 추가 및 적용

👻 에러 종류

에러 종류를 다음과 같이 정의하였습니다.

e is unknown
- string, array 등 모든 타입
e is Error
- 정형화된 에러 객체
- 모든 에러는 Error의 서브 타입이며 복구 불가능한 에러를 포함한다 (TypeError 등)
- 개발자가 조치해야 한다
- 예를 들면 throw new Error('부모 트리에서 ToastProvider를 사용해주세요') 가 해당된다.
e is AppError
- Error의 서브 타입이며, 복구 가능한 에러이다
- 앱 내에서 의도적으로 발생시킨 에러
- 사용자가 조치할 수 있다
- 예를 들면 throw new AppError('잘못된 텍스트입니다') 가 해당된다.
e is NetworkError
- AppError 의 서브타입이며, 네트워크 장애에 해당되는 에러
e is APIError
- AppError 의 서브타입이며, API 호출 중 400, 500일 시 이 에러에 해당
- 백엔드에서 응답한 에러 코드 및 메세지를 포함한다

👻 ErrorBoundary

ErrorBoundary
- 컴포넌트 렌더링 중 에러 발생 시 catch하는 컴포넌트
- catch 시 대체 컴포넌트(fallback)을 렌더링 함
- fallbackRender, FallbackComponent props로 대체 컴포넌트를 렌더링할 수 있다
- caught props로 핸들링 할 에러의 범위를 지정할 수 있다
QueryErrorBoundary
- react-query 에서 suspense: true 로 사용할 시 유용한 에러 바운더리
- query reset, network online 시 자동으로 retry 기능이 내장되어 있다

👻 useSilentLink

네트워크 상태를 감지하고 오프라인 혹은 온라인 전환될 시 토스트 메세지를 띄운다

👻 `retry` 는 껐습니다

retry가 기본으로 3회인데, 사용자가 에러든 응답이든 피드백을 받기까지 너무 오래 걸리는 것 같아 retry를 껐습니다

💬 리뷰 요구사항

몹 프로그래밍 이후에 수정한 사항이 많이 있으니 꼭 확인 부탁드립니다!

npm으로 마이그레이션

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

* caught, FallbackComponent 추가 * fallbackRender에서 error도 주입

jeongwusi

간단하게 코멘트 확인 부탁드립니다^^

client/src/App.tsx

client/src/hooks/useSilentLink.ts

client/src/errors/AppError.ts

client/src/errors/APIError.ts

jeongwusi

확인하였습니다!

geuntaek1013

고생하셨습니다~!! 간단한 리뷰 확인해주세요:)

geuntaek1013 · 2023-10-10T02:22:46Z

client/src/errors/NetworkError.ts

@@ -0,0 +1,9 @@
+import AppError from './AppError';
+
+class NetworkError extends AppError {


NetworkError를 AppError의 서브 타입으로 정의한 이유가 있으실까요?

Error의 서브 타입이며, 복구 가능한 에러이다

앱 내에서 의도적으로 발생시킨 에러

사용자가 조치할 수 있다

AppError를 위와 같이 정의하여서 NetworkError는 AppError의 서브 클래스가 될 수 있습니다. "사용자가 조치할 수 있다"는 말은 즉슨 저희가 이 에러를 핸들링하여 사용자에게 적절한 UI를 제공할 수 있다면 AppError 에 해당될 수 있습니다.

geuntaek1013 · 2023-10-10T02:43:41Z

client/src/pages/ErrorPage.tsx

-        <MainSentence>다시 확인해주세요</MainSentence>
-        <Sentence>요청하신 내용을 찾을 수 없어요</Sentence>
+        <MainSentence>{isExpectedError ? '다시 확인해주세요' : '예기치 못한 에러가 발생하였습니다'}</MainSentence>
+        {isExpectedError && <Sentence>{message}</Sentence>}


isExpectedError가 true일 때, Error 인스턴스의 error.message를 렌더링하는데, 이 부분을 사용자에게 그대로 노출할 필요가 있을까요?

isExpectedError인 경우 사용자에게 표시할 만한 메세지가 나타날 것이기 때문에 적절한 코드라고 생각합니다!

geuntaek1013 · 2023-10-10T02:47:48Z

client/src/pages/ErrorPage.tsx

@@ -1,31 +1,36 @@
 import { MdOutlineErrorOutline } from 'react-icons/md';
-import { Link } from 'react-router-dom';
+import { Link, useRouteError } from 'react-router-dom';


오 router에 이런 훅이 있었나요? 덕분에 하나 배워갑니다!!👍
페이지 라우팅 중에 액션, 로더, 렌더링 중에 발생한 모든 오류를 반환한다는데 개발자가 따로 처리해야 할 작업이 없나요?
error에 할당하여 사용하면 끝인가요?

넵 그렇습니다. 그리고 그 error를 어떻게 취급할 것인지는 개발자에게 달려있다고 할 수 있습니다.

geuntaek1013 · 2023-10-10T02:53:16Z

client/src/context/ToastContext.tsx

  const [toastState, setToastState] = useState<{ variant: ToastVariant; message: string | null }>({
    variant: 'default',
    message: null,
  });

-  useEffect(() => {


useEffect 는 이제 필요가 없어서 삭제하신건가요?😲

그렇습니다~!

geuntaek1013 · 2023-10-10T02:58:08Z

client/src/context/ToastContext.tsx


  return (
    <ToastContext.Provider value={contextValue}>
      {children}
      {toastState.message !== null && (
-        <Container>
+        <Container key={toastId}>


key를 상위 부모인 Container에 주신 이유가 있으신가요?

토스트 애니메이션을 다시 재생하기 위해 DOM이 새로운 DOM으로 재생성될 필요가 있고, 이를 key 속성을 통해 하고있다고 보심 됩니다!

geuntaek1013 · 2023-10-10T08:09:32Z

client/src/components/ErrorBoundary.tsx

+    };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {


getDerivedStateFromError를 static 정적 메서드로 설정하신 이유가 있으신가요?

React에서 error를 처리하는 방법이 그렇기 때문입니다!

solo5star and others added 18 commits October 5, 2023 19:16

Merge pull request #538 from woowacourse-teams/build/498-migrate-to-npm

b85ffa2

npm으로 마이그레이션

feat: 에러 정의 (AppError, NetworkError)

5fcdad5

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

feat: ErrorPage에서 AppError 혹은 Error 여부에 따라 메세지 표시 분기 처리

fa83f97

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

feat: NotFoundPage에서 AppError를 throw하도록 수정

73bcefc

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

fix: 연속으로 Toast를 띄울 때 잘 띄워지지 않는 오류 수정

d5629b4

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

feat: ErrorBoundary와 QueryErrorBoundary 구현

ab62224

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

feat: useSilentLink 구현

637fea6

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

feat: ErrorRetryPrompt 구현 및 적용

e592dee

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

feat: 에러 처리 router에 적용

ce26068

Co-authored-by: jeongwusi <[email protected]> Co-authored-by: geuntaek1013 <[email protected]>

feat: CafeDetailBottomSheet에 QueryErrorBoundary 적용

8f39e61

style: 컴포넌트 코드 순서 변경

34534f8

feat: ErrorBoundary, QueryErrorBoundary 몇몇 props 추가

8f8bd53

* caught, FallbackComponent 추가 * fallbackRender에서 error도 주입

fix: ErrorRetryPrompt가 대부분의 box에서 잘 표시되도록 수정

9871b03

feat: 메세지 수정

98acc12

docs: AppError 클래스에 JSDoc 추가

13558c7

docs: NetworkError에 JSDoc 추가

bea286a

feat: APIError 추가 및 적용

15f1074

feat: query retry off

c5bbb90

solo5star added 카테고리:기능🛠️ 만들어줘잉 FE 될 때까지 한다잉 작업:몹 몹 프로그래밍으로 진행이 필요합니다 우선순위:🟡보통 급하진 않지만, 필요한 작업입니다. 카테고리:리팩토링🪚 리팩토링입니다. labels Oct 8, 2023

solo5star assigned solo5star and geuntaek1013 Oct 8, 2023

solo5star requested review from jeongwusi and geuntaek1013 as code owners October 8, 2023 09:43

solo5star assigned jeongwusi Oct 8, 2023

solo5star linked an issue Oct 8, 2023 that may be closed by this pull request

세분화된 에러 핸들링 #540

Closed

jeongwusi requested changes Oct 10, 2023

View reviewed changes

client/src/App.tsx Show resolved Hide resolved

client/src/hooks/useSilentLink.ts Show resolved Hide resolved

client/src/errors/AppError.ts Show resolved Hide resolved

client/src/errors/APIError.ts Show resolved Hide resolved

jeongwusi approved these changes Oct 11, 2023

View reviewed changes

geuntaek1013 approved these changes Oct 11, 2023

View reviewed changes

solo5star merged commit 01a4ddc into dev Oct 11, 2023
1 check failed

solo5star deleted the feat/540-improved-error-handling branch October 11, 2023 09:27

solo5star restored the feat/540-improved-error-handling branch October 11, 2023 09:27

solo5star deleted the feat/540-improved-error-handling branch October 11, 2023 09:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

에러 핸들링을 위한 컴포넌트 추가 및 적용 #546

에러 핸들링을 위한 컴포넌트 추가 및 적용 #546

solo5star commented Oct 8, 2023 •

edited

Loading

jeongwusi left a comment

jeongwusi left a comment

geuntaek1013 left a comment

geuntaek1013 Oct 10, 2023

solo5star Oct 11, 2023

geuntaek1013 Oct 10, 2023

solo5star Oct 11, 2023

geuntaek1013 Oct 10, 2023

solo5star Oct 11, 2023

geuntaek1013 Oct 10, 2023

solo5star Oct 11, 2023

geuntaek1013 Oct 10, 2023

solo5star Oct 11, 2023

geuntaek1013 Oct 10, 2023

solo5star Oct 11, 2023

		@@ -0,0 +1,9 @@
		import AppError from './AppError';

		class NetworkError extends AppError {

에러 핸들링을 위한 컴포넌트 추가 및 적용 #546

에러 핸들링을 위한 컴포넌트 추가 및 적용 #546

Conversation

solo5star commented Oct 8, 2023 • edited Loading

#️⃣ 연관된 이슈

📝 작업 내용

👻 에러 종류

👻 ErrorBoundary

👻 useSilentLink

👻 retry 는 껐습니다

💬 리뷰 요구사항

jeongwusi left a comment

Choose a reason for hiding this comment

jeongwusi left a comment

Choose a reason for hiding this comment

geuntaek1013 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

solo5star commented Oct 8, 2023 •

edited

Loading

👻 `retry` 는 껐습니다