Files
modeling-app/src/components/ErrorPage.tsx

66 lines
1.8 KiB
TypeScript

import { isTauri } from 'lib/isTauri'
import { useRouteError, isRouteErrorResponse } from 'react-router-dom'
import { ActionButton } from './ActionButton'
import {
faBug,
faHome,
faRefresh,
faTrash,
} from '@fortawesome/free-solid-svg-icons'
export const ErrorPage = () => {
let error = useRouteError()
console.error('error', error)
return (
<div className="flex flex-col items-center justify-center h-screen">
<section className="max-w-full xl:max-w-4xl mx-auto">
<h1 className="text-4xl mb-8 font-bold" data-testid="unexpected-error">
An unexpected error occurred
</h1>
{isRouteErrorResponse(error) && (
<p className="mb-8">
{error.status}: {error.data}
</p>
)}
<div className="flex justify-between gap-2 mt-6">
{isTauri() && (
<ActionButton
Element="link"
to={'/'}
iconStart={{ icon: faHome }}
data-testid="unexpected-error-home"
>
Go Home
</ActionButton>
)}
<ActionButton
Element="button"
iconStart={{ icon: faRefresh }}
onClick={() => window.location.reload()}
>
Reload
</ActionButton>
<ActionButton
Element="button"
iconStart={{ icon: faTrash }}
onClick={() => {
window.localStorage.clear()
}}
>
Clear storage
</ActionButton>
<ActionButton
Element="externalLink"
iconStart={{ icon: faBug }}
to="https://github.com/KittyCAD/modeling-app/issues/new"
>
Report Bug
</ActionButton>
</div>
</section>
</div>
)
}