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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 1x 1x 1x 12x 12x 12x 12x 12x 12x 1x 10x 10x 10x 10x 10x 1x 5x 5x 1x 1x 1x 1x 1x 1x 1x 23x 11x 4x 4x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 12x 23x 1x 1x | import React from 'react';
interface ErrorBoundaryProps {
children: React.ReactNode;
fallback?: React.ReactNode;
}
interface ErrorBoundaryState {
hasError: boolean;
error: Error | null;
}
/**
* Error Boundary Component
*
* Catches JavaScript errors anywhere in the child component tree,
* logs the errors, and displays a fallback UI
*/
export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = {
hasError: false,
error: null
};
}
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
return {
hasError: true,
error
};
}
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
console.error('Error boundary caught error:', error, errorInfo);
}
handleReset = () => {
this.setState({
hasError: false,
error: null
});
};
render() {
if (this.state.hasError) {
if (this.props.fallback) {
return this.props.fallback;
}
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
<div className="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
<div className="text-6xl mb-4">⚠️</div>
<h1 className="text-2xl font-bold text-gray-900 mb-2">
Something went wrong
</h1>
<p className="text-gray-600 mb-6">
We're sorry, but something unexpected happened. Please try refreshing the page.
</p>
{this.state.error && (
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6 text-left">
<p className="text-sm text-red-800 font-mono break-words">
{this.state.error.message}
</p>
</div>
)}
<div className="flex gap-3 justify-center">
<button
onClick={this.handleReset}
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Try Again
</button>
<button
onClick={() => window.location.href = '/'}
className="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
>
Go Home
</button>
</div>
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
|