164 lines
4.4 KiB
React
164 lines
4.4 KiB
React
import React, { Component } from 'react';
|
||
import { Button, Result, Space, Collapse, Typography } from 'antd';
|
||
import {
|
||
WarningOutlined,
|
||
ReloadOutlined,
|
||
HomeOutlined,
|
||
BugOutlined,
|
||
} from '@ant-design/icons';
|
||
|
||
const { Text, Paragraph } = Typography;
|
||
const { Panel } = Collapse;
|
||
|
||
class ErrorBoundary extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
hasError: false,
|
||
error: null,
|
||
errorInfo: null,
|
||
};
|
||
}
|
||
|
||
static getDerivedStateFromError(error) {
|
||
return { hasError: true };
|
||
}
|
||
|
||
componentDidCatch(error, errorInfo) {
|
||
this.setState({
|
||
error,
|
||
errorInfo,
|
||
});
|
||
|
||
console.error('错误边界捕获到错误:', error, errorInfo);
|
||
|
||
if (this.props.onError) {
|
||
this.props.onError(error, errorInfo);
|
||
}
|
||
}
|
||
|
||
handleReload = () => {
|
||
window.location.reload();
|
||
};
|
||
|
||
handleGoHome = () => {
|
||
window.location.href = '/';
|
||
};
|
||
|
||
render() {
|
||
if (this.state.hasError) {
|
||
if (this.props.fallback) {
|
||
return this.props.fallback;
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
minHeight: this.props.fullPage ? '100vh' : '400px',
|
||
background: this.props.fullPage ? '#f5f5f5' : 'transparent',
|
||
padding: '24px',
|
||
}}
|
||
>
|
||
<Result
|
||
status="error"
|
||
title={this.props.title || '组件加载失败'}
|
||
subTitle={
|
||
this.props.subTitle ||
|
||
'抱歉，该组件在加载过程中遇到了错误。您可以尝试重新加载或返回首页。'
|
||
}
|
||
icon={
|
||
<WarningOutlined
|
||
style={{
|
||
fontSize: '64px',
|
||
color: '#ff4d4f',
|
||
}}
|
||
/>
|
||
}
|
||
extra={
|
||
<Space size="middle">
|
||
<Button
|
||
type="primary"
|
||
icon={<ReloadOutlined />}
|
||
onClick={this.handleReload}
|
||
>
|
||
重新加载
|
||
</Button>
|
||
<Button
|
||
icon={<HomeOutlined />}
|
||
onClick={this.handleGoHome}
|
||
>
|
||
返回首页
|
||
</Button>
|
||
</Space>
|
||
}
|
||
>
|
||
{this.state.error && (
|
||
<div style={{ textAlign: 'left', marginTop: '24px' }}>
|
||
<Collapse
|
||
size="small"
|
||
items={[
|
||
{
|
||
key: 'error-details',
|
||
label: (
|
||
<Space>
|
||
<BugOutlined />
|
||
<Text type="secondary">查看错误详情（开发环境）</Text>
|
||
</Space>
|
||
),
|
||
children: (
|
||
<>
|
||
<Paragraph
|
||
code
|
||
style={{
|
||
background: '#f5f5f5',
|
||
padding: '12px',
|
||
borderRadius: '4px',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
{this.state.error.toString()}
|
||
</Paragraph>
|
||
{this.state.errorInfo?.componentStack && (
|
||
<Paragraph
|
||
code
|
||
style={{
|
||
background: '#f5f5f5',
|
||
padding: '12px',
|
||
borderRadius: '4px',
|
||
fontSize: '12px',
|
||
overflow: 'auto',
|
||
maxHeight: '200px',
|
||
}}
|
||
>
|
||
{this.state.errorInfo.componentStack}
|
||
</Paragraph>
|
||
)}
|
||
</>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
)}
|
||
</Result>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return this.props.children;
|
||
}
|
||
}
|
||
|
||
ErrorBoundary.defaultProps = {
|
||
fallback: null,
|
||
fullPage: false,
|
||
title: null,
|
||
subTitle: null,
|
||
onError: null,
|
||
};
|
||
|
||
export default ErrorBoundary;
|