File size: 2,700 Bytes
8e8c6a4 | 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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import React from "react";
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("Error caught by boundary:", error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<div className="min-h-screen bg-[#FAFAFA] flex items-center justify-center p-8">
<div className="max-w-md w-full bg-white rounded-2xl border border-red-200 p-8 shadow-lg">
<div className="text-center">
<div className="h-16 w-16 mx-auto rounded-full bg-red-100 flex items-center justify-center mb-4">
<svg
className="h-8 w-8 text-red-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</div>
<h2 className="text-xl font-bold text-slate-900 mb-2">
Something went wrong
</h2>
<p className="text-sm text-slate-600 mb-6">
The application encountered an error. Please refresh the page or contact support if the problem persists.
</p>
<button
onClick={() => window.location.reload()}
className="px-6 py-2 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition-colors"
>
Refresh Page
</button>
{process.env.NODE_ENV === "development" && this.state.error && (
<details className="mt-6 text-left">
<summary className="text-sm text-slate-500 cursor-pointer mb-2">
Error Details (Development Only)
</summary>
<pre className="text-xs bg-slate-100 p-4 rounded-lg overflow-auto max-h-64">
{this.state.error.toString()}
{this.state.error.stack}
</pre>
</details>
)}
</div>
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
|