57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
import React from 'react';
|
||
import { Icon } from './icons';
|
||
|
||
class ErrorBoundary extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = { hasError: false, error: null };
|
||
}
|
||
|
||
static getDerivedStateFromError(error) {
|
||
return { hasError: true, error };
|
||
}
|
||
|
||
componentDidCatch(error, errorInfo) {
|
||
console.error('ErrorBoundary caught error:', error, errorInfo);
|
||
}
|
||
|
||
handleReload = () => {
|
||
window.location.reload();
|
||
};
|
||
|
||
handleGoHome = () => {
|
||
window.location.href = '/';
|
||
};
|
||
|
||
render() {
|
||
if (this.state.hasError) {
|
||
return (
|
||
<div className="error-boundary">
|
||
<div className="error-boundary__content">
|
||
<Icon name="info" size={48} />
|
||
<h2>出错了</h2>
|
||
<p>抱歉，应用遇到了问题。</p>
|
||
{process.env.NODE_ENV === 'development' && (
|
||
<pre className="error-boundary__details">
|
||
{this.state.error?.toString()}
|
||
</pre>
|
||
)}
|
||
<div className="error-boundary__actions">
|
||
<button onClick={this.handleGoHome} className="btn btn-secondary">
|
||
返回首页
|
||
</button>
|
||
<button onClick={this.handleReload} className="btn btn-primary">
|
||
重新加载
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return this.props.children;
|
||
}
|
||
}
|
||
|
||
export default ErrorBoundary;
|