Error Boundary

1import { Component, type ReactNode } from 'react'
2import { Button } from '@/components/ui/button'
3import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
4import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
5 
6interface Props {
7  children: ReactNode
8}
9 
10interface State {
11  hasError: boolean
12  error?: Error
13}
14 
15export class ErrorBoundary extends Component<Props, State> {
16  constructor(props: Props) {
17    super(props)
18    this.state = { hasError: false }
19  }
20 
21  static getDerivedStateFromError(error: Error): State {
22    return { hasError: true, error }
23  }
24 
25  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
26    // Log error to console in development
27    if (process.env.NODE_ENV === 'development') {
28      console.error('Error caught by boundary:', error, errorInfo)
29    }
30  }
31 
32  handleReload = () => {
33    window.location.reload()
34  }
35 
36  handleGoHome = () => {
37    window.location.href = '/'
38  }
39 
40  render() {
41    if (this.state.hasError) {
42      return (
43        <div className="min-h-screen bg-background flex items-center justify-center p-4">
44          <Card className="max-w-lg w-full">
45            <CardHeader className="bg-destructive">
46              <CardTitle className="flex items-center gap-3">
47                <AlertTriangle className="h-6 w-6 stroke-[3]" />
48                Something went wrong
49              </CardTitle>
50            </CardHeader>
51            <CardContent className="pt-6 space-y-4">
52              <p className="text-muted-foreground">
53                An unexpected error occurred. This has been logged and we'll look into it.
54              </p>
55              {process.env.NODE_ENV === 'development' && this.state.error && (
56                <pre className="bg-muted border-3 border-foreground p-4 text-sm overflow-x-auto">
57                  <code>{this.state.error.message}</code>
58                </pre>
59              )}
60              <div className="flex gap-3">
61                <Button onClick={this.handleReload} className="gap-2">
62                  <RefreshCw className="h-4 w-4" />
63                  Reload Page
64                </Button>
65                <Button variant="outline" onClick={this.handleGoHome} className="gap-2">
66                  <Home className="h-4 w-4" />
67                  Go Home
68                </Button>
69              </div>
70            </CardContent>
71          </Card>
72        </div>
73      )
74    }
75 
76    return this.props.children
77  }
78}