applications/drive/src/app/components/AppErrorBoundary.tsx

   1 import { useEffect, useState } from 'react';
   2 import * as React from 'react';
   3 import { useLocation } from 'react-router-dom';
   4
   5 import {
   6     AccessDeniedError,
   7     ErrorBoundary,
   8     GenericError,
   9     InternalServerError,
  10     NotFoundError,
  11     PrivateMainArea,
  12 } from '@proton/components';
  13 import { HTTP_STATUS_CODE } from '@proton/shared/lib/constants';
  14 import { RESPONSE_CODE } from '@proton/shared/lib/drive/constants';
  15 import { ApiError } from '@proton/shared/lib/fetch/ApiError';
  16 import generateUID from '@proton/utils/generateUID';
  17
  18 import { useActiveShare } from '../hooks/drive/useActiveShare';
  19
  20 interface Props {
  21     children: React.ReactNode;
  22 }
  23
  24 const AppErrorBoundary = ({ children }: Props) => {
  25     const location = useLocation();
  26     const { setDefaultRoot } = useActiveShare();
  27     const [state, setState] = useState<{ id: string; error?: Error }>({
  28         id: generateUID('error-boundary'),
  29     });
  30
  31     useEffect(() => {
  32         if (state.error) {
  33             setState({ id: generateUID('error-boundary') });
  34         }
  35     }, [location]);
  36
  37     const handleError = (error: Error) => {
  38         setState((prev) => ({ ...prev, error }));
  39         setDefaultRoot();
  40     };
  41
  42     const renderError = () => {
  43         const { error } = state;
  44         if (!error) {
  45             return null;
  46         }
  47
  48         if (error instanceof ApiError) {
  49             if (error.status === HTTP_STATUS_CODE.INTERNAL_SERVER_ERROR) {
  50                 return <InternalServerError />;
  51             }
  52             if (error.status === HTTP_STATUS_CODE.NOT_FOUND || error.data?.Code === RESPONSE_CODE.INVALID_ID) {
  53                 return <NotFoundError />;
  54             }
  55             if (error.status === HTTP_STATUS_CODE.FORBIDDEN) {
  56                 return <AccessDeniedError />;
  57             }
  58         }
  59
  60         return <GenericError />;
  61     };
  62
  63     return (
  64         <ErrorBoundary
  65             key={state.id}
  66             onError={handleError}
  67             component={<PrivateMainArea>{renderError()}</PrivateMainArea>}
  68         >
  69             {children}
  70         </ErrorBoundary>
  71     );
  72 };
  73
  74 export default AppErrorBoundary;