1
import { Component, type ReactNode } from "react";
2
 
3
interface ErrorBoundaryProps {
4
  children: ReactNode;
5
}
6
 
7
interface ErrorBoundaryState {
8
  hasError: boolean;
9
  error: Error | null;
10
}
11
 
12
export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
13
  state: ErrorBoundaryState = { hasError: false, error: null };
14
 
15
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
16
    return { hasError: true, error };
17
  }
18
 
19
  render() {
20
    if (this.state.hasError) {
21
      return (
22
        <div className="rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-8 text-center">
23
          <h2 className="text-zinc-100">Something went wrong</h2>
24
          <p className="text-sm text-zinc-500">{this.state.error?.message}</p>
25
          <button
26
            type="button"
27
            className="inline-flex items-center justify-center rounded-xl bg-accent-500/15 px-4 py-2 text-sm font-medium text-accent-300 transition-colors hover:bg-accent-500/25"
28
            onClick={() => {
29
              this.setState({ hasError: false, error: null });
30
              window.location.href = "/app/projects";
31
            }}
32
          >
33
            Go to projects
34
          </button>
35
        </div>
36
      );
37
    }
38
 
39
    return this.props.children;
40
  }
41
}