import { cssBundleHref } from "@remix-run/css-bundle"; import type { LinksFunction, LoaderArgs } from "@remix-run/node"; import { json } from "@remix-run/node"; import { isRouteErrorResponse, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useRouteError } from "@remix-run/react"; import type { ReactNode } from "react"; import { PageLayout } from "~/components/page-layout"; import { getUser } from "~/session.server"; import stylesheet from "~/tailwind.css"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []) ]; export const loader = async ({ request }: LoaderArgs) => { return json({ user: await getUser(request) }); }; export type DocumentProps = { children: ReactNode; title?: string; } function Document({ title, children }: DocumentProps) { return ( {title ? {title} : null} {children} ); } export default function App() { return ( ); } export function ErrorBoundary() { const error = useRouteError(); console.error(error); if (isRouteErrorResponse(error)) { const title = `${error.status} - ${error.statusText}`; return (

{title}

); } if (error instanceof Error) { return (

Yikes!

{error.message}

Stack Trace

{error.stack}
); } return (

Sorry, something went wrong...

); }