29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
import { Component, type ErrorInfo, type ReactNode } from 'react';
|
|
import { Button } from '../components/ui';
|
|
export class ErrorBoundary extends Component<{ children: ReactNode }, { error?: Error }> {
|
|
state: { error?: Error } = {};
|
|
static getDerivedStateFromError(error: Error) {
|
|
return { error };
|
|
}
|
|
componentDidCatch(error: Error, info: ErrorInfo) {
|
|
console.error('React fatal error', error, info);
|
|
}
|
|
render() {
|
|
return this.state.error ? (
|
|
<main className="grid h-screen place-items-center bg-app text-text-primary">
|
|
<section className="max-w-xl rounded-xl border border-danger-border bg-panel p-6 shadow-xl">
|
|
<h1 className="text-xl font-semibold">界面发生致命错误</h1>
|
|
<pre className="mt-3 whitespace-pre-wrap text-sm text-danger">
|
|
{this.state.error.message}
|
|
</pre>
|
|
<Button variant="danger" className="mt-4" onClick={() => location.reload()}>
|
|
重新加载
|
|
</Button>
|
|
</section>
|
|
</main>
|
|
) : (
|
|
this.props.children
|
|
);
|
|
}
|
|
}
|