1// Global error boundary page. Rendered by React Router when a route throws
 2// or when navigation results in a 404. Replaces the default "Unexpected
 3// Application Error!" screen.
 4
 5import { useRouteError, isRouteErrorResponse, Link } from 'react-router-dom'
 6import { AlertTriangle } from 'lucide-react'
 7import { Button } from '@/components/ui/button'
 8
 9export function ErrorPage() {
10  const error = useRouteError()
11
12  let status: number | undefined
13  let message: string
14
15  if (isRouteErrorResponse(error)) {
16    status = error.status
17    message = error.statusText || error.data
18  } else if (error instanceof Error) {
19    message = error.message
20  } else {
21    message = 'An unexpected error occurred.'
22  }
23
24  return (
25    <div className="flex min-h-screen flex-col items-center justify-center gap-4 text-center">
26      <AlertTriangle className="size-10 text-muted-foreground" />
27      {status && (
28        <p className="text-5xl font-bold tracking-tight">{status}</p>
29      )}
30      <p className="text-sm text-muted-foreground">{message}</p>
31      <Button variant="outline" size="sm" asChild>
32        <Link to="/">Go home</Link>
33      </Button>
34    </div>
35  )
36}