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 96 97 98 99 100 101 102 103 104 105 106 107 108 | 12x 12x 10x 5x 5x 26x 15x 3x 12x 11x | import React, { Component, ErrorInfo, ReactNode } from 'react';
import { AlertTriangle, Home, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
interface Props {
children: ReactNode;
fallback?: ReactNode;
}
interface State {
hasError: boolean;
error: Error | null;
errorInfo: ErrorInfo | null;
}
class ErrorBoundary extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
};
}
static getDerivedStateFromError(error: Error): State {
return {
hasError: true,
error,
errorInfo: null,
};
}
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
console.error('ErrorBoundary caught an error:', error, errorInfo);
this.setState({
error,
errorInfo,
});
}
handleReset = () => {
this.setState({
hasError: false,
error: null,
errorInfo: null,
});
};
render() {
if (this.state.hasError) {
if (this.props.fallback) {
return this.props.fallback;
}
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="max-w-md w-full space-y-6">
<div className="text-center">
<AlertTriangle className="w-16 h-16 text-destructive mx-auto mb-4" />
<h1 className="text-2xl font-bold text-foreground mb-2">
Algo salió mal
</h1>
<p className="text-muted-foreground mb-6">
La aplicación encontró un error inesperado. Por favor, intenta recargar la página.
</p>
</div>
{import.meta.env.DEV && this.state.error && (
<div className="p-4 bg-muted border border-border rounded-lg">
<p className="text-sm font-mono text-destructive mb-2">
{this.state.error.toString()}
</p>
{this.state.errorInfo && (
<pre className="text-xs text-muted-foreground overflow-auto max-h-40">
{this.state.errorInfo.componentStack}
</pre>
)}
</div>
)}
<div className="flex flex-col gap-3">
<Button onClick={this.handleReset} className="w-full">
<RefreshCw className="w-4 h-4 mr-2" />
Intentar de nuevo
</Button>
<Button
variant="outline"
className="w-full"
onClick={() => {
window.location.href = '/';
}}
>
<Home className="w-4 h-4 mr-2" />
Ir al inicio
</Button>
</div>
</div>
</div>
);
}
return this.props.children;
}
}
export default ErrorBoundary;
|