48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { Button, Flex, Text } from '@/ui';
|
|
import { useDisclosure } from '@/utils/disclosure';
|
|
import React, { FC } from 'react';
|
|
|
|
|
|
import {
|
|
FallbackProps,
|
|
ErrorBoundary as ReactErrorBoundary,
|
|
} from 'react-error-boundary';
|
|
import { LuChevronUp, LuChevronDown } from 'react-icons/lu';
|
|
|
|
const ErrorFallback = ({ error }: FallbackProps) => {
|
|
const { open, onToggle } = useDisclosure();
|
|
return (
|
|
<Flex direction="column" style={{ padding: 4, margin: "auto", backgroundColor: "red.500" }}>
|
|
<Text color='red'>An unexpected error has occurred.</Text>
|
|
<Text>Message: {error.message}</Text>
|
|
{/*
|
|
<AlertRoot status="error" borderRadius="md">
|
|
<Flex style={{ flex: "1" }}>
|
|
<AlertTitle>An unexpected error has occurred.</AlertTitle>
|
|
<AlertDescription display="block" lineHeight="1.4">
|
|
<Button
|
|
//theme="@secondary"
|
|
color="red.800"
|
|
//size="sm"
|
|
onClick={onToggle}
|
|
>
|
|
Show details {open ? <LuChevronUp /> : <LuChevronDown />}
|
|
</Button>
|
|
<Collapsible.Root open={open}>
|
|
<Collapsible.Content>
|
|
<Flex mt={4} fontFamily="monospace">
|
|
{error.message}
|
|
</Flex>
|
|
</Collapsible.Content>
|
|
</Collapsible.Root>
|
|
</AlertDescription>
|
|
</Flex>
|
|
</AlertRoot> */}
|
|
</Flex >
|
|
);
|
|
};
|
|
|
|
export const ErrorBoundary: FC<React.PropsWithChildren<unknown>> = (props) => {
|
|
return <ReactErrorBoundary FallbackComponent={ErrorFallback} {...props} />;
|
|
};
|