import { Component, type ReactNode } from 'react';
interface Props {
children: ReactNode;
}
interface State {
error: Error | null;
}
export default 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 items-center justify-center min-h-screen bg-bg">
<div className="card max-w-md text-center space-y-md">
<h1 className="text-display-md text-ink">Something went wrong</h1>
<p className="text-tertiary">{this.state.error.message}</p>
<button
className="btn-primary"
onClick={() => {
this.setState({ error: null });
window.location.reload();
}}
>
Reload page
</button>
</div>
</div>
);
}
return this.props.children;
}
}