Spaces:
Running
Running
File size: 1,926 Bytes
0dd2082 4dae2f7 0dd2082 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import React from 'react';
import './ErrorBoundary.css';
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 an error:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<div className="error-boundary-container">
<div className="error-boundary-content fade-in-up">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="error-boundary-icon">
<polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<h2>Something went wrong.</h2>
<p>We've encountered an unexpected error. Our team has been notified.</p>
<button
className="error-boundary-btn"
onClick={() => window.location.reload()}
>
Reload Page
</button>
{typeof window !== 'undefined' && window.location.hostname === 'localhost' && (
<pre className="error-boundary-details">{this.state.error?.toString()}</pre>
)}
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
|