Spaces:
Running
Running
File size: 2,087 Bytes
b88ce1b |
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 |
import React from 'react';
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 });
console.error("Uncaught error:", error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<div className="min-h-screen flex items-center justify-center bg-red-50 p-4">
<div className="bg-white p-8 rounded-xl shadow-xl max-w-2xl w-full border border-red-100">
<h1 className="text-2xl font-bold text-red-600 mb-4">Something went wrong</h1>
<div className="bg-red-50 p-4 rounded-lg mb-4 overflow-auto max-h-60">
<code className="text-red-800 text-sm font-mono whitespace-pre-wrap">
{this.state.error && this.state.error.toString()}
</code>
</div>
<details className="text-sm text-slate-500">
<summary className="cursor-pointer mb-2 font-medium">Stack Trace</summary>
<pre className="bg-slate-50 p-4 rounded-lg overflow-auto max-h-60 text-xs font-mono">
{this.state.errorInfo && this.state.errorInfo.componentStack}
</pre>
</details>
<button
onClick={() => window.location.reload()}
className="mt-6 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
>
Reload Page
</button>
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
|