55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Card } from './ui/Card';
|
|
import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
|
|
|
|
export function ErrorBoundary() {
|
|
const error = useRouteError();
|
|
console.error(error);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl mx-auto">
|
|
<Card>
|
|
<div className="p-6 text-center">
|
|
<h2 className="text-2xl font-bold text-red-600 mb-4">
|
|
Ocorreu um erro
|
|
</h2>
|
|
|
|
<div className="mt-4 p-4 bg-red-50 rounded-lg text-left">
|
|
{isRouteErrorResponse(error) ? (
|
|
<div>
|
|
<p><strong>Status:</strong> {error.status}</p>
|
|
<p><strong>Mensagem:</strong> {error.data.message || error.statusText}</p>
|
|
</div>
|
|
) : error instanceof Error ? (
|
|
<div>
|
|
<p><strong>Erro:</strong> {error.message}</p>
|
|
{error.stack && (
|
|
<details className="mt-2">
|
|
<summary className="cursor-pointer text-sm">Ver detalhes técnicos</summary>
|
|
<pre className="mt-2 whitespace-pre-wrap text-xs">
|
|
{error.stack}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p>Ocorreu um erro desconhecido.</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<a
|
|
href="/"
|
|
className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
|
|
>
|
|
Voltar para a página inicial
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|