feat: internal server error page

site/src/main.tsx

@@ -14,6 +14,7 @@ import { LogoutPage } from "./pages/logout-page.tsx";
 import { ContinuePage } from "./pages/continue-page.tsx";
 import { NotFoundPage } from "./pages/not-found-page.tsx";
 import { UnauthorizedPage } from "./pages/unauthorized-page.tsx";
+import { InternalServerError } from "./pages/internal-server-error.tsx";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -36,6 +37,7 @@ createRoot(document.getElementById("root")!).render(
               <Route path="/logout" element={<LogoutPage />} />
               <Route path="/continue" element={<ContinuePage />} />
               <Route path="/unauthorized" element={<UnauthorizedPage />} />
+              <Route path="/error" element={<InternalServerError />} />
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </BrowserRouter>

site/src/pages/internal-server-error.tsx

@@ -0,0 +1,21 @@
+import { Button, Paper, Text } from "@mantine/core";
+import { Layout } from "../components/layouts/layout";
+
+export const InternalServerError = () => {
+  return (
+    <Layout>
+      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
+        <Text size="xl" fw={700}>
+          Internal Server Error
+        </Text>
+        <Text>
+          An error occured on the server and it currently cannot serve your
+          request.
+        </Text>
+        <Button fullWidth mt="xl" onClick={() => window.location.replace("/")}>
+          Try again
+        </Button>
+      </Paper>
+    </Layout>
+  );
+};