77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Alert, Button } from 'antd';
|
|
import { ReloadOutlined } from '@ant-design/icons';
|
|
|
|
class ErrorBoundary extends React.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
|
|
});
|
|
|
|
// Log error to console in development
|
|
if (process.env.NODE_ENV === 'development') {
|
|
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
|
}
|
|
}
|
|
|
|
handleReload = () => {
|
|
this.setState({ hasError: false, error: null, errorInfo: null });
|
|
window.location.reload();
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div style={{ padding: '24px', textAlign: 'center' }}>
|
|
<Alert
|
|
message="Something went wrong"
|
|
description={
|
|
<div>
|
|
<p>The application encountered an unexpected error.</p>
|
|
{process.env.NODE_ENV === 'development' && this.state.error && (
|
|
<details style={{ marginTop: '16px', textAlign: 'left' }}>
|
|
<summary>Error Details (Development)</summary>
|
|
<pre style={{ marginTop: '8px', fontSize: '12px' }}>
|
|
{this.state.error.toString()}
|
|
{this.state.errorInfo.componentStack}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
<Button
|
|
type="primary"
|
|
icon={<ReloadOutlined />}
|
|
onClick={this.handleReload}
|
|
style={{ marginTop: '16px' }}
|
|
>
|
|
Reload Page
|
|
</Button>
|
|
</div>
|
|
}
|
|
type="error"
|
|
showIcon
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
ErrorBoundary.propTypes = {
|
|
children: PropTypes.node.isRequired
|
|
};
|
|
|
|
export default ErrorBoundary;
|