ATProto forum built with ESAV
whey.party
1import {
2 ErrorComponent,
3 Link,
4 rootRouteId,
5 useMatch,
6 useRouter,
7} from '@tanstack/react-router'
8import type { ErrorComponentProps } from '@tanstack/react-router'
9
10export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
11 const router = useRouter()
12 const isRoot = useMatch({
13 strict: false,
14 select: (state) => state.id === rootRouteId,
15 })
16
17 console.error('DefaultCatchBoundary Error:', error)
18
19 return (
20 <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
21 <ErrorComponent error={error} />
22 <div className="flex gap-2 items-center flex-wrap">
23 <button
24 onClick={() => {
25 router.invalidate()
26 }}
27 className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
28 >
29 Try Again
30 </button>
31 {isRoot ? (
32 <Link
33 to="/"
34 className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
35 >
36 Home
37 </Link>
38 ) : (
39 <Link
40 to="/"
41 className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
42 onClick={(e) => {
43 e.preventDefault()
44 window.history.back()
45 }}
46 >
47 Go Back
48 </Link>
49 )}
50 </div>
51 </div>
52 )
53}