Rocky
231c5040a5
Expose ledger-backed cross-device purchase history while shipping the tested React admin redesign in the same reproducible deployment revision.
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { AlertTriangle, RefreshCw } from "lucide-react";
|
|
import { Component, type ErrorInfo, type ReactNode } from "react";
|
|
import { Button, Card } from "./primitives";
|
|
|
|
interface State {
|
|
failed: boolean;
|
|
}
|
|
|
|
export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
|
|
state: State = { failed: false };
|
|
|
|
static getDerivedStateFromError(): State {
|
|
return { failed: true };
|
|
}
|
|
|
|
componentDidCatch(_error: Error, _info: ErrorInfo): void {
|
|
// 管理端禁止记录可能包含用户或运营数据的渲染上下文。
|
|
}
|
|
|
|
render() {
|
|
if (!this.state.failed) return this.props.children;
|
|
return (
|
|
<Card className="mx-auto grid min-h-80 max-w-lg place-items-center border-danger/20 p-8 text-center">
|
|
<div>
|
|
<span className="mx-auto mb-4 grid size-12 place-items-center rounded-2xl bg-danger-soft text-danger">
|
|
<AlertTriangle className="size-5" aria-hidden />
|
|
</span>
|
|
<h1 className="text-lg font-bold">页面暂时无法显示</h1>
|
|
<p className="mt-2 text-sm leading-6 text-muted">
|
|
页面渲染时出现异常。请重新加载，未提交的操作不会自动执行。
|
|
</p>
|
|
<Button className="mt-6" variant="secondary" onClick={() => window.location.reload()}>
|
|
<RefreshCw className="size-4" aria-hidden />
|
|
重新加载
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
}
|