30 lines
879 B
TypeScript
30 lines
879 B
TypeScript
import { Component, type ReactNode } from "react";
|
|
|
|
export class ErrorBoundary extends Component<{ children: ReactNode }, { err: Error | null }> {
|
|
state: { err: Error | null } = { err: null };
|
|
|
|
static getDerivedStateFromError(err: Error) {
|
|
return { err };
|
|
}
|
|
|
|
render() {
|
|
if (this.state.err) {
|
|
return (
|
|
<div className="grid h-full place-items-center p-8 text-center">
|
|
<div>
|
|
<p className="mb-2 text-lg text-red-400">页面出错了</p>
|
|
<p className="mb-4 max-w-md text-sm break-all text-stone-500">{String(this.state.err)}</p>
|
|
<button
|
|
className="rounded-md bg-stone-800 px-3 py-1.5 text-sm"
|
|
onClick={() => this.setState({ err: null })}
|
|
>
|
|
重试
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return this.props.children;
|
|
}
|
|
}
|