fix: the error boundary shouldn't have <html>

This commit is contained in:
Aarnav Tale
2024-03-26 09:08:34 -04:00
parent ed9cc23020
commit b8498a9db3
2 changed files with 26 additions and 37 deletions
+26 -36
View File
@@ -64,42 +64,32 @@ export function ErrorBoundary() {
const routing = isRouteErrorResponse(error) const routing = isRouteErrorResponse(error)
const message = (error instanceof Error ? error.message : 'An unexpected error occurred') const message = (error instanceof Error ? error.message : 'An unexpected error occurred')
return ( return (
<html> <div className='flex min-h-screen items-center justify-center'>
<head> <div className={clsx(
<title>Oh no!</title> 'w-1/3 border p-4 rounded-lg flex flex-col items-center text-center',
<Meta/> routing ? 'gap-2' : 'gap-4'
<Links/> )}
</head> >
<body> {routing ? (
<div className='flex min-h-screen items-center justify-center'> <>
<div className={clsx( <QuestionMarkCircleIcon className='text-gray-500 w-14 h-14'/>
'w-1/3 border p-4 rounded-lg flex flex-col items-center text-center', <h1 className='text-2xl font-bold'>{error.status}</h1>
routing ? 'gap-2' : 'gap-4' <p className='opacity-50 text-sm'>{error.statusText}</p>
)} </>
> ) : (
{routing ? ( <>
<> <ExclamationTriangleIcon className='text-red-500 w-14 h-14'/>
<QuestionMarkCircleIcon className='text-gray-500 w-14 h-14'/> <h1 className='text-2xl font-bold'>Error</h1>
<h1 className='text-2xl font-bold'>{error.status}</h1> <code className='bg-gray-100 p-1 rounded-md'>
<p className='opacity-50 text-sm'>{error.statusText}</p> {message}
</> </code>
) : ( <p className='opacity-50 text-sm mt-4'>
<> If you are the administrator of this site, please check your logs for information.
<ExclamationTriangleIcon className='text-red-500 w-14 h-14'/> </p>
<h1 className='text-2xl font-bold'>Error</h1> </>
<code className='bg-gray-100 p-1 rounded-md'> )}
{message} </div>
</code> </div>
<p className='opacity-50 text-sm mt-4'>
If you are the administrator of this site, please check your logs for information.
</p>
</>
)}
</div>
</div>
<Scripts/>
</body>
</html>
) )
} }
-1
View File
@@ -53,7 +53,6 @@ export default function Layout() {
<main className='container mx-auto overscroll-contain'> <main className='container mx-auto overscroll-contain'>
<Outlet/> <Outlet/>
</main> </main>
</> </>
) )
} }