📄에러페이지 다루기

에러페이지 도입배경

특정 컴포넌트가 에러시에 부모로 에러처리의 역할을 위임하여 처리한 기존의 방식과 다르게 페이지 전체가 에러를 다뤄야 하는 경우도 있다는 것을 깨달았다.

• 잘못된 주소로 접근하는 경우
• 잘못된 ID로 데이터를 요청하는 경우

잘못된 주소로 접근하는 경우

<Routes>
  <Route path="/" element={<MainPage />} />
  <Route path="/live/:id" element={<ClientPage />} />
  <Route path="/replay/:id" element={<ReplayPage />} />
  <Route path="/host" element={<HostPage />} />
  <Route path="*" element={<ErrorPage />} />
</Routes>

특정 라우팅을 제외한 페이지는 에러페이지로 가도록 처리

잘못된 ID로 데이터를 요청하는 경우

페이지에서 데이터를 페칭해올 때 useParam으로 ID를 추출해서 데이터를 가져오는 경우가 있었다.

여기서 ID가 잘못되는 경우에 어떻게 처리를 해야할지 고민했다.

• 비디오를 보여주는 부분만 AsyncBoundary로 에러처리를 하기
• 에러페이지로 navigate하기

결론적으로 에러페이지로 navigate하는 방법을 선택

• 비디오부문만 에러처리하는 것이 아닌 주소 자체가 잘못된 것이라 판단하여 에러페이지로 넘기는게 맞다 판단

또한, 잘못된 ID를 통해 데이터를 페치해오는데 실패했지만 근본적인 이유는 ID가 유효하지 않은 것 때문이므로

ID가 유효한지 API로 초기 체크를 할 필요성을 느꼈다.

고차함수로 유효한 ID파악하기

• useCheckLiveExist 훅을 통해 id가 유효한지 확인하고 유효하지 않으면 에러페이지로 navigate처리
• withLiveExistCheck라는 고차함수를 통해 ClientPage와 같은 페이지 전체를 감싸도록 구현

export default function withLiveExistCheck<P extends object>(WrappedComponent: ComponentType<P>) {
  return function WithLiveExistCheckComponent(props: P) {
    const { id: liveId } = useParams();
    const navigate = useNavigate();

    const { data: isLiveExistData } = useCheckLiveExist({ liveId: liveId as string });
    const isLiveExist = isLiveExistData?.existed;

    useEffect(() => {
      if (!isLiveExist) {
        navigate('/error');
      }
    }, [isLiveExistData]);

    return <WrappedComponent {...props} />;
  };
}

function ClientPageComponent() {
  return (
    <>
      <Header />
      <ClientContainer>
        <AsyncBoundary pendingFallback={<></>} rejectedFallback={() => <PlayerStreamError />}>
          <ClientView />
          <ClientChatRoom />
        </AsyncBoundary>
      </ClientContainer>
    </>
  );
}

const ClientPage = withLiveExistCheck(ClientPageComponent);

export default ClientPage;

왜 고차함수로 페이지를 감싸는 선택을 했을까

• ClientPage 뿐만아니라 ReplayPage에서도 ID검증이 필요해서 중복 로직을 제거
• 역할 분리 : Id를 검증하여 에러페이지로 navigate하는 로직과 렌더링 로직을 분리