Add 404 and error boundary components wired into router

frontend/src/routes/__root.tsx

@@ -3,7 +3,9 @@ import { useSuspenseQuery } from '@tanstack/react-query'
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'
 import { lazy, Suspense } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { ErrorState } from '~/components/error-state'
 import { Shell } from '~/components/layout/shell'
+import { NotFound } from '~/components/not-found'
 import { globalsQuery, menusQuery } from '~/lib/queries'
 
 const TanStackRouterDevtools = import.meta.env.PROD
@@ -19,6 +21,16 @@ export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()(
     await Promise.all([queryClient.ensureQueryData(globalsQuery), queryClient.ensureQueryData(menusQuery)])
   },
   component: RootComponent,
+  notFoundComponent: () => (
+    <Shell>
+      <NotFound />
+    </Shell>
+  ),
+  errorComponent: ({ error, reset }) => (
+    <Shell>
+      <ErrorState error={error} reset={reset} />
+    </Shell>
+  ),
 })
 
 function RootComponent() {