52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import React, { FC } from 'react';
|
|
|
|
import {
|
|
Alert,
|
|
AlertDescription,
|
|
AlertIcon,
|
|
AlertTitle,
|
|
Box,
|
|
Button,
|
|
Collapse,
|
|
useDisclosure,
|
|
} from '@chakra-ui/react';
|
|
import {
|
|
FallbackProps,
|
|
ErrorBoundary as ReactErrorBoundary,
|
|
} from 'react-error-boundary';
|
|
import { LuChevronDown, LuChevronUp } from 'react-icons/lu';
|
|
|
|
const ErrorFallback = ({ error }: FallbackProps) => {
|
|
const { isOpen, onToggle } = useDisclosure();
|
|
return (
|
|
<Box p="4" m="auto">
|
|
<Alert status="error" borderRadius="md">
|
|
<AlertIcon />
|
|
<Box flex="1">
|
|
<AlertTitle>An unexpected error has occurred.</AlertTitle>
|
|
<AlertDescription display="block" lineHeight="1.4">
|
|
<Button
|
|
variant="link"
|
|
color="red.800"
|
|
size="sm"
|
|
rightIcon={isOpen ? <LuChevronUp /> : <LuChevronDown />}
|
|
onClick={onToggle}
|
|
>
|
|
Show details
|
|
</Button>
|
|
<Collapse in={isOpen} animateOpacity>
|
|
<Box mt={4} fontFamily="monospace">
|
|
{error.message}
|
|
</Box>
|
|
</Collapse>
|
|
</AlertDescription>
|
|
</Box>
|
|
</Alert>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export const ErrorBoundary: FC<React.PropsWithChildren<unknown>> = (props) => {
|
|
return <ReactErrorBoundary FallbackComponent={ErrorFallback} {...props} />;
|
|
};
|