import { Component } from "react";
interface Props {
children: React.ReactNode;
}
interface State {
error: Error | null;
}
export class ErrorBoundary extends Component<Props, State> {
state: State = { error: null };
static getDerivedStateFromError(error: Error): State {
return { error };
}
render() {
if (this.state.error) {
return (
<div className="flex min-h-screen items-center justify-center p-8">
<div className="max-w-md space-y-4 text-center">
<h1 className="text-xl font-semibold text-fg">
Something went wrong
</h1>
<p className="text-sm text-muted-fg">
{this.state.error.message}
</p>
<button
onClick={() => {
this.setState({ error: null });
window.location.reload();
}}
className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-fg"
>
Reload
</button>
</div>
</div>
);
}
return this.props.children;
}
}