1
import { Component } from "react";
2
import type { ReactNode } from "react";
3
import { AlertCircle } from "lucide-react";
4
import { Button } from "@/client/components/ui/button";
5
 
6
interface Props {
7
  fallback?: ReactNode;
8
  children: ReactNode;
9
}
10
 
11
interface State {
12
  hasError: boolean;
13
}
14
 
15
export class ErrorBoundary extends Component<Props, State> {
16
  state: State = { hasError: false };
17
 
18
  static getDerivedStateFromError(): State {
19
    return { hasError: true };
20
  }
21
 
22
  render() {
23
    if (this.state.hasError) {
24
      if (this.props.fallback) return this.props.fallback;
25
      return (
26
        <div className="flex h-full items-center justify-center">
27
          <div className="text-center">
28
            <AlertCircle className="mx-auto mb-3 h-8 w-8 text-red-400" />
29
            <p className="mb-3 text-sm text-zinc-400">Something went wrong.</p>
30
            <Button variant="secondary" size="sm" onClick={() => window.location.reload()}>
31
              Reload
32
            </Button>
33
          </div>
34
        </div>
35
      );
36
    }
37
    return this.props.children;
38
  }
39
}