File size: 1,967 Bytes
c89a139 |
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 50 51 52 53 |
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
class GlobalErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null, errorInfo: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
console.error("Uncaught error:", error, errorInfo);
this.setState({ errorInfo });
}
render() {
if (this.state.hasError) {
return (
<div style={{ padding: '2rem', fontFamily: 'sans-serif', color: '#ef4444' }}>
<h1 style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem' }}>Something went wrong.</h1>
<div style={{ backgroundColor: '#fee2e2', padding: '1rem', borderRadius: '0.5rem', border: '1px solid #fca5a5' }}>
<p style={{ fontWeight: 'bold' }}>{this.state.error && this.state.error.toString()}</p>
<pre style={{ marginTop: '1rem', fontSize: '0.875rem', overflowX: 'auto' }}>
{this.state.errorInfo && this.state.errorInfo.componentStack}
</pre>
</div>
<button
onClick={() => window.location.reload()}
style={{ marginTop: '1rem', padding: '0.5rem 1rem', backgroundColor: '#3b82f6', color: 'white', border: 'none', borderRadius: '0.25rem', cursor: 'pointer' }}
>
Reload Page
</button>
</div>
);
}
return this.props.children;
}
}
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<GlobalErrorBoundary>
<App />
</GlobalErrorBoundary>
</React.StrictMode>,
)
|