ErrorBoundary

react 에서 에러를 처리하기 위해서 ErrorBoundary를 사용하면 된단다.

• 에러 경계(Error Boundaries)
• react-error-boundary
  

그런데

에러 경계는 다음과 같은 에러는 포착하지 않습니다.

이벤트 핸들러 (더 알아보기)
비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
서버 사이드 렌더링
자식에서가 아닌 에러 경계 자체에서 발생하는 에러

이 내용을 꼼꼼히 보지 않아서 원하는 대로 fallback 페이지를 보여주지 못하는 문제가 있었다.

그래서 결국 window에서 발생하는 모든 에러를 잡아서 fallback화면을 보여주면 되지 않을까 생각해서..
이렇게 만들었다.

const ErrorBoundary: React.FC = ({ children }) => {
  const [error, setError] = React.useState<Error | null>(null);

  React.useEffect(() => {
    const onError = (e: ErrorEvent) => {
      setError(e.error);
    };

    window.addEventListener('error', onError);
    return () => window.removeEventListener('error', onError);
  }, []);

  if (error) return <FallbackPage error={error} />;
  return <>{children}</>;
};

export default ErrorBoundary;