Error Boundary

Purpose

• For deleting and creating new files, the old chunk file may not be available anymore, but also for compile error, which may cause the crash of the ui

• In order to bring user a better user experience, the fallback page is required

Install

yarn add react-error-boundary

Example

import { ErrorBoundary } from "react-error-boundary";

 <ErrorBoundary
    FallbackComponent={ChunkError}
    onReset={() => {
      window.location.reload();
    }}
  >
    <Routes>
      ...
    </Routes>
  </ErrorBoundary>

const ChunkError = ({ error, resetErrorBoundary }: FallbackProps) => {
  React.useEffect(() => {
    if (error.name === "ChunkLoadError") resetErrorBoundary();
  }, [error, resetErrorBoundary]);
  const isMobile = useIsMobile();
  return (
    <Button onClick={resetErrorBoundary}>
      {t("TEXT_REFRESH_PAGE")}
    </Button>
  );
};

export default ChunkError;