gui.do
Barazo default frontend
barazo.forum
1/**
2 * Root error boundary -- catch-all for all routes.
3 * Catches unhandled errors from any page that doesn't have its own error.tsx.
4 * Reports to GlitchTip when available, falls back to console logging.
5 * Next.js requires a default export for error boundaries.
6 * @see https://nextjs.org/docs/app/api-reference/file-conventions/error
7 */
8
9'use client'
10
11import { useEffect } from 'react'
12import Link from 'next/link'
13import { WarningCircle, ArrowClockwise, House } from '@phosphor-icons/react'
14import { reportError } from '@/lib/error-reporting'
15
16export default function RootError({
17 error,
18 reset,
19}: {
20 error: Error & { digest?: string }
21 reset: () => void
22}) {
23 useEffect(() => {
24 reportError(error, { boundary: 'root' })
25 }, [error])
26
27 const message =
28 process.env.NODE_ENV === 'development'
29 ? error.message
30 : 'An unexpected error occurred. Please try again.'
31
32 return (
33 <>
34 <title>Error | Barazo</title>
35 <div className="flex min-h-[60vh] items-center justify-center bg-background px-4">
36 <main className="w-full max-w-md text-center">
37 <div role="alert" aria-live="assertive">
38 <WarningCircle size={48} className="mx-auto mb-4 text-destructive" aria-hidden="true" />
39 <h1 className="mb-2 text-xl font-bold text-foreground">Something went wrong</h1>
40 <p className="mb-6 text-sm text-muted-foreground">{message}</p>
41 </div>
42 <div className="flex items-center justify-center gap-3">
43 <button
44 type="button"
45 onClick={reset}
46 className="inline-flex items-center gap-1.5 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
47 >
48 <ArrowClockwise size={16} aria-hidden="true" />
49 Try again
50 </button>
51 <Link
52 href="/"
53 className="inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
54 >
55 <House size={16} aria-hidden="true" />
56 Go home
57 </Link>
58 </div>
59 </main>
60 </div>
61 </>
62 )
63}