import { ChakraProvider } from "@chakra-ui/react" ; import { Links , LiveReload , Meta , Outlet , Scripts , ScrollRestoration , useCatch , } from "remix" ; import { ErrorBox } from "./components/ErrorBox" ; export default function App ( ) { return ( < Document > < Outlet /> < /Document>); } export function ErrorBoundary ( { error } ) { console . error ( error ) ; return ( < Document title = "Error!" > < ErrorBox title = { `There was an error` } description = { error . message } / > < /Document>); } export function CatchBoundary ( ) { let caught = useCatch ( ) ; let message ; switch ( caught . status ) { case 401 : message = ( < p > Oops ! Looks like you tried to visit a page that you do not have access to . < /p>); break ; case 404 : message = ( < p > Oops ! Looks like you tried to visit a page that does not exist . < /p>); break ; default : throw new Error ( caught . data || caught . statusText ) ; } return ( < Document title = { `${ caught . status } ${ caught . statusText }` } > < ErrorBox title = { `${ caught . status }: ${ caught . statusText }` } description = { message } / > < /Document>); } function Document ( { children , title , } ) { return ( < html lang = "en" > < head > < meta charSet = "utf-8" / > < meta name = "viewport" content = "width=device-width,initial-scale=1" / > { title ? < title > { title } < /title> : null} < Meta / > < Links /> < /head> < body > < ChakraProvider > { children } < /ChakraProvider> < ScrollRestoration / > < Scripts /> { process . env . NODE_ENV === "development" && < LiveReload />} < /body> < /html>); }