File size: 2,905 Bytes
aefa338 | 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 74 75 76 77 | import React from 'react';
import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
export default class ErrorBoundary 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('DiffWeave Caught Runtime Error:', error, errorInfo);
this.setState({ errorInfo });
}
handleReset = () => {
this.setState({ hasError: false, error: null, errorInfo: null });
window.location.href = '/';
};
handleReload = () => {
window.location.reload();
};
render() {
if (this.state.hasError) {
return (
<div className="min-h-screen bg-[#080B11] text-slate-100 flex items-center justify-center p-6">
<div className="max-w-lg w-full bg-[#0D1117] border border-rose-500/30 rounded-2xl p-8 shadow-2xl space-y-6 text-center">
<div className="w-16 h-16 rounded-2xl bg-rose-500/10 border border-rose-500/20 text-rose-400 flex items-center justify-center mx-auto shadow-lg shadow-rose-500/10">
<AlertTriangle className="w-8 h-8" />
</div>
<div className="space-y-2">
<h2 className="text-xl font-bold text-white tracking-tight">Something went wrong</h2>
<p className="text-xs text-slate-400">
DiffWeave encountered an unexpected client error. Don't worry, your workspace data and documents are safely stored.
</p>
</div>
{this.state.error && (
<div className="p-3.5 rounded-xl bg-black/60 border border-[#30363D] text-left overflow-auto max-h-40">
<p className="font-mono text-xs text-rose-400 font-semibold break-words">
{this.state.error.toString()}
</p>
</div>
)}
<div className="flex items-center justify-center space-x-3 pt-2">
<button
onClick={this.handleReload}
className="px-4 py-2.5 rounded-xl bg-[#21262D] hover:bg-[#30363D] border border-[#30363D] text-slate-200 text-xs font-semibold flex items-center space-x-2 transition"
>
<RefreshCw className="w-3.5 h-3.5" />
<span>Reload Page</span>
</button>
<button
onClick={this.handleReset}
className="px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold flex items-center space-x-2 transition shadow-lg shadow-emerald-600/20"
>
<Home className="w-3.5 h-3.5" />
<span>Return to Hub</span>
</button>
</div>
</div>
</div>
);
}
return this.props.children;
}
}
|