chapter 04 / 12

에러 복구: ErrorBoundaryGroup과 shouldCatch

여러 경계를 한 번에 리셋

화면에 ErrorBoundary가 여러 개일 때, 하나씩 리셋하긴 번거롭다. ErrorBoundaryGroup으로 묶으면 그룹 전체를 한 번에 되돌릴 수 있다.

import { ErrorBoundaryGroup, useErrorBoundaryGroup } from "@suspensive/react";
 
function RetryAll() {
  const { reset } = useErrorBoundaryGroup();
  return <button onClick={reset}>전체 다시 시도</button>;
}
 
<ErrorBoundaryGroup>
  <RetryAll />
  <ErrorBoundary fallback={...}><A /></ErrorBoundary>
  <ErrorBoundary fallback={...}><B /></ErrorBoundary>
</ErrorBoundaryGroup>;

shouldCatch: 잡을 에러 고르기

모든 에러를 이 경계가 삼키면 안 될 때가 있다. shouldCatch로 특정 에러만 잡고 나머지는 상위 경계로 흘려보낸다.

<ErrorBoundary
  shouldCatch={(error) => error instanceof NetworkError}
  fallback={<Retry />}
>
  <Feed />
</ErrorBoundary>

resetKeys에 값이 바뀌면 자동으로 경계를 리셋하는 것도 자주 쓰는 패턴이다.