61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
|
import { Icons } from '@/components/icons';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useEffect, useTransition } from 'react';
|
|
import * as Sentry from '@sentry/nextjs';
|
|
|
|
interface StatsErrorProps {
|
|
error: Error;
|
|
reset: () => void; // Add reset function from error boundary
|
|
}
|
|
export default function StatsError({ error, reset }: StatsErrorProps) {
|
|
const router = useRouter();
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
useEffect(() => {
|
|
Sentry.captureException(error);
|
|
}, [error]);
|
|
|
|
// the reload fn ensures the refresh is deffered until the next render phase allowing react to handle any pending states before processing
|
|
const reload = () => {
|
|
startTransition(() => {
|
|
router.refresh();
|
|
reset();
|
|
});
|
|
};
|
|
return (
|
|
<Card className='border-red-500'>
|
|
<CardHeader className='flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row'>
|
|
<div className='flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6'>
|
|
<Alert variant='destructive' className='border-none'>
|
|
<Icons.alertCircle className='h-4 w-4' />
|
|
<AlertTitle>Error</AlertTitle>
|
|
<AlertDescription className='mt-2'>
|
|
Failed to load statistics: {error.message}
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className='flex h-[316px] items-center justify-center p-6'>
|
|
<div className='text-center'>
|
|
<p className='text-muted-foreground mb-4 text-sm'>
|
|
Unable to display statistics at this time
|
|
</p>
|
|
<Button
|
|
onClick={() => reload()}
|
|
variant='outline'
|
|
className='min-w-[120px]'
|
|
disabled={isPending}
|
|
>
|
|
Try again
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|