Antigravity AI Agent
97 lines
3.7 KiB
TypeScript
97 lines
3.7 KiB
TypeScript
import React, { ErrorInfo, ReactNode } from 'react';
|
|
import { AlertTriangle, RefreshCw, XCircle } from 'lucide-react';
|
|
|
|
interface Props {
|
|
children?: ReactNode;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error: Error | null;
|
|
errorInfo: ErrorInfo | null;
|
|
}
|
|
|
|
export class ErrorBoundary extends React.Component<Props, State> {
|
|
// FIX: Switched to constructor-based state initialization to resolve issues
|
|
// where the TypeScript toolchain might not correctly interpret public class fields,
|
|
// causing `this.props` and `this.setState` to appear unavailable. This is a more
|
|
// widely compatible approach.
|
|
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("Uncaught error:", error, errorInfo);
|
|
this.setState({ errorInfo });
|
|
}
|
|
|
|
handleReload = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<div className="min-h-screen bg-red-50 flex items-center justify-center p-6 font-sans">
|
|
<div className="max-w-3xl w-full bg-white rounded-2xl shadow-2xl overflow-hidden border border-red-100">
|
|
<div className="bg-red-600 p-6 flex items-center gap-4">
|
|
<div className="bg-white/20 p-3 rounded-full text-white">
|
|
<XCircle size={32} />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white uppercase">ERRO CRÍTICO NO SISTEMA</h1>
|
|
<p className="text-red-100 text-xs font-bold uppercase mt-1">O APLICATIVO ENCONTROU UM PROBLEMA INESPERADO</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8">
|
|
<div className="mb-6">
|
|
<p className="text-gray-700 font-bold uppercase mb-2">O QUE ACONTECEU?</p>
|
|
<p className="text-gray-600 text-sm">
|
|
Ocorreu uma falha durante a renderização da interface. Tente recarregar a página.
|
|
Se o problema persistir, envie o log abaixo para o suporte técnico.
|
|
</p>
|
|
</div>
|
|
|
|
{this.state.error && (
|
|
<div className="bg-gray-900 rounded-lg p-4 mb-6 overflow-x-auto border-l-4 border-red-500">
|
|
<div className="flex items-center gap-2 text-red-400 font-bold text-xs uppercase mb-2">
|
|
<AlertTriangle size={14} /> Stack Trace / Log Técnico
|
|
</div>
|
|
<pre className="text-green-400 font-mono text-xs leading-relaxed whitespace-pre-wrap break-words">
|
|
{this.state.error.toString()}
|
|
<br />
|
|
{this.state.errorInfo?.componentStack}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={this.handleReload}
|
|
className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-bold uppercase flex items-center gap-2 transition-colors shadow-lg"
|
|
>
|
|
<RefreshCw size={18} /> RECARREGAR SISTEMA
|
|
</button>
|
|
<button
|
|
onClick={() => { localStorage.clear(); window.location.reload(); }}
|
|
className="bg-gray-200 hover:bg-gray-300 text-gray-700 px-6 py-3 rounded-lg font-bold uppercase flex items-center gap-2 transition-colors"
|
|
>
|
|
LIMPAR CACHE E REINICIAR
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|