mirror of https://github.com/buster-so/buster.git
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
|
import { type ErrorRouteComponent, Link } from '@tanstack/react-router';
|
||
|
|
import { usePostHog } from 'posthog-js/react';
|
||
|
|
import { useEffect } from 'react';
|
||
|
|
import { Button } from '@/components/ui/buttons';
|
||
|
|
import { Card, CardContent, CardFooter } from '@/components/ui/card/CardBase';
|
||
|
|
|
||
|
|
const ErrorCard = () => {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="bg-opacity-90 flex min-h-screen w-screen flex-col items-center justify-center bg-linear-to-br from-gray-50 to-gray-200 p-8 backdrop-blur-xs backdrop-brightness-95 backdrop-filter"
|
||
|
|
role="alert"
|
||
|
|
>
|
||
|
|
<Card className="-mt-10 max-w-100">
|
||
|
|
<CardContent>
|
||
|
|
<div className="flex flex-col gap-4">
|
||
|
|
<h1 className="text-2xl font-medium">Looks like we hit an unexpected error</h1>
|
||
|
|
|
||
|
|
<h5 className="m-0 text-base font-medium text-gray-600">
|
||
|
|
{`Our team has been notified via Slack. We'll take a look at the issue ASAP and get back to you.`}
|
||
|
|
</h5>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
|
||
|
|
<CardFooter className="w-full pt-0">
|
||
|
|
<Link to="/" className="w-full">
|
||
|
|
<Button variant="black" block size="tall">
|
||
|
|
Take me home
|
||
|
|
</Button>
|
||
|
|
</Link>
|
||
|
|
</CardFooter>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const GlobalErrorCard: ErrorRouteComponent = ({ error }) => {
|
||
|
|
const posthog = usePostHog();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const isPosthogLoaded = posthog.__loaded;
|
||
|
|
|
||
|
|
if (isPosthogLoaded) {
|
||
|
|
posthog.captureException(error);
|
||
|
|
}
|
||
|
|
|
||
|
|
console.error(error);
|
||
|
|
}, [error]);
|
||
|
|
|
||
|
|
return <ErrorCard />;
|
||
|
|
};
|