36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { useThemePreference } from './hooks/useThemePreference';
|
|
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 ? <FatalError error={this.state.error} /> : this.props.children;
|
|
}
|
|
}
|
|
|
|
function FatalError({ error }: { error: Error }) {
|
|
const [theme] = useThemePreference();
|
|
return (
|
|
<main
|
|
className={`theme-${theme} grid min-h-screen place-items-center bg-app p-4 text-text-primary`}
|
|
>
|
|
<section className="min-w-0 max-w-xl rounded-lg border border-danger-border bg-panel p-6 shadow-xl">
|
|
<h1 className="text-xl font-semibold">界面发生致命错误</h1>
|
|
<pre className="mt-3 max-h-[50vh] overflow-auto whitespace-pre-wrap break-words text-sm text-danger">
|
|
{error.message}
|
|
</pre>
|
|
<p className="mt-3 text-xs text-warning">重新加载会丢失当前浏览器会话中未保存的修改。</p>
|
|
<Button variant="danger" className="mt-4" onClick={() => location.reload()}>
|
|
重新加载
|
|
</Button>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|