153 lines
4.0 KiB
TypeScript
153 lines
4.0 KiB
TypeScript
import { Component, type ReactNode } from "react";
|
||
import { reportError } from "../utils/errorReporting";
|
||
|
||
interface Props {
|
||
children: ReactNode;
|
||
}
|
||
|
||
interface State {
|
||
hasError: boolean;
|
||
error: Error | null;
|
||
}
|
||
|
||
class ErrorBoundary extends Component<Props, State> {
|
||
constructor(props: Props) {
|
||
super(props);
|
||
this.state = { hasError: false, error: null };
|
||
}
|
||
|
||
static getDerivedStateFromError(error: Error): State {
|
||
return { hasError: true, error };
|
||
}
|
||
|
||
componentDidCatch(error: Error, info: React.ErrorInfo) {
|
||
console.error("[ErrorBoundary] Uncaught error:", error, info.componentStack);
|
||
reportError(error, "boundary");
|
||
}
|
||
|
||
handleReset = () => {
|
||
this.setState({ hasError: false, error: null });
|
||
};
|
||
|
||
handleReload = () => {
|
||
window.location.reload();
|
||
};
|
||
|
||
render() {
|
||
if (!this.state.hasError) {
|
||
return this.props.children;
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
minHeight: "100vh",
|
||
background: "var(--bg-base, #f5f5f5)",
|
||
padding: 24,
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
maxWidth: 480,
|
||
padding: "48px 40px",
|
||
borderRadius: 16,
|
||
background: "var(--surface-panel, #fff)",
|
||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||
textAlign: "center",
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 48, marginBottom: 16 }}>⚠️</div>
|
||
<h2
|
||
style={{
|
||
margin: "0 0 12px",
|
||
fontSize: 20,
|
||
fontWeight: 600,
|
||
color: "var(--text-primary, #1a1a1a)",
|
||
}}
|
||
>
|
||
页面出错了
|
||
</h2>
|
||
<p
|
||
style={{
|
||
margin: "0 0 24px",
|
||
fontSize: 14,
|
||
color: "var(--text-secondary, #666)",
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
应用遇到了意外错误，请尝试刷新页面。
|
||
<br />
|
||
如果问题持续出现，请联系技术支持。
|
||
</p>
|
||
{this.state.error && (
|
||
<details
|
||
style={{
|
||
marginBottom: 24,
|
||
padding: 12,
|
||
borderRadius: 8,
|
||
background: "var(--bg-elevated, #f0f0f0)",
|
||
textAlign: "left",
|
||
fontSize: 12,
|
||
color: "var(--text-secondary, #666)",
|
||
}}
|
||
>
|
||
<summary style={{ cursor: "pointer", fontWeight: 500 }}>
|
||
错误详情
|
||
</summary>
|
||
<pre
|
||
style={{
|
||
marginTop: 8,
|
||
whiteSpace: "pre-wrap",
|
||
wordBreak: "break-word",
|
||
fontFamily: "monospace",
|
||
fontSize: 11,
|
||
}}
|
||
>
|
||
{this.state.error.message}
|
||
</pre>
|
||
</details>
|
||
)}
|
||
<div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
|
||
<button
|
||
type="button"
|
||
onClick={this.handleReset}
|
||
style={{
|
||
padding: "10px 24px",
|
||
borderRadius: 8,
|
||
border: "1px solid var(--border-normal, #ddd)",
|
||
background: "transparent",
|
||
color: "var(--text-primary, #1a1a1a)",
|
||
fontSize: 14,
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
重试
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={this.handleReload}
|
||
style={{
|
||
padding: "10px 24px",
|
||
borderRadius: 8,
|
||
border: "none",
|
||
background: "var(--accent, #0d9488)",
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
fontWeight: 500,
|
||
cursor: "pointer",
|
||
}}
|
||
>
|
||
刷新页面
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
|
||
export default ErrorBoundary;
|