Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null, showStack: false };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, info) {
console.error('ErrorBoundary caught:', error, info);
}
render() {
if (!this.state.hasError) return this.props.children;
const { error, showStack } = this.state;
return (
<div className="flex items-center justify-center h-screen bg-lab-bg text-lab-fg p-8">
<div className="max-w-lg w-full bg-lab-bg-secondary border border-red-500/30 rounded-2xl p-8 space-y-6 shadow-2xl">
<div className="flex items-center gap-3">
<div className="w-10 h-10 bg-lab-error/20 rounded-xl flex items-center justify-center">
<svg className="w-5 h-5 text-lab-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h2 className="text-lg font-bold text-lab-error">Something went wrong</h2>
<p className="text-xs text-lab-fg-secondary">The application encountered an unexpected error.</p>
</div>
</div>
<div className="bg-red-950/30 border border-red-500/20 rounded-xl p-4">
<p className="text-sm text-red-300 font-mono break-words">{error?.message || 'Unknown error'}</p>
</div>
{error?.stack && (
<div>
<button
onClick={() => this.setState({ showStack: !showStack })}
className="text-xs text-lab-fg-secondary hover:text-lab-fg underline"
>
{showStack ? 'Hide' : 'Show'} stack trace
</button>
{showStack && (
<pre className="mt-2 bg-lab-bg border border-lab-border rounded-lg p-3 text-[10px] text-lab-fg-secondary overflow-auto max-h-48 font-mono">
{error.stack}
</pre>
)}
</div>
)}
<button
onClick={() => window.location.reload()}
className="w-full py-3 bg-lab-button-bg hover:bg-lab-button-bg rounded-xl text-sm font-bold text-white transition-all active:scale-95"
>
Reload Application
</button>
</div>
</div>
);
}
}
export default ErrorBoundary;
|