feat: correctly use error boundaries per-page

app/routes/acls/overview.tsx

@@ -7,6 +7,7 @@ import Card from "~/components/Card";
 import Code from "~/components/Code";
 import Link from "~/components/link";
 import Notice from "~/components/Notice";
+import PageError from "~/components/page-error";
 import Tabs from "~/components/Tabs";
 import { isApiError } from "~/server/headscale/api/error-client";
 import toast from "~/utils/toast";
@@ -185,5 +186,5 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
     );
   }
 
-  throw error;
+  return <PageError error={error} page="Access Control" />;
 }

app/routes/dns/overview.tsx

@@ -3,6 +3,7 @@ import { useLoaderData } from "react-router";
 
 import Code from "~/components/Code";
 import Notice from "~/components/Notice";
+import PageError from "~/components/page-error";
 import type { LoadContext } from "~/server";
 import { Capabilities } from "~/server/web/roles";
 
@@ -101,3 +102,7 @@ export default function Page() {
     </div>
   );
 }
+
+export function ErrorBoundary({ error }: { error: unknown }) {
+  return <PageError error={error} page="DNS" />;
+}

app/routes/machines/overview.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import Code from "~/components/Code";
 import Input from "~/components/Input";
 import Link from "~/components/link";
+import PageError from "~/components/page-error";
 import Tooltip from "~/components/Tooltip";
 import { Capabilities } from "~/server/web/roles";
 import cn from "~/utils/cn";
@@ -381,3 +382,7 @@ export default function Page({ loaderData }: Route.ComponentProps) {
     </>
   );
 }
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  return <PageError error={error} page="Machines" />;
+}

app/routes/settings/overview.tsx

@@ -1,6 +1,7 @@
 import { ArrowRight } from "lucide-react";
 
 import Link from "~/components/link";
+import PageError from "~/components/page-error";
 
 import type { Route } from "./+types/overview";
 
@@ -64,3 +65,7 @@ export default function Page({ loaderData: { config, isOidcEnabled } }: Route.Co
     </div>
   );
 }
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  return <PageError error={error} page="Settings" />;
+}

app/routes/users/overview.tsx

@@ -3,6 +3,7 @@ import { createHash } from "node:crypto";
 import { eq } from "drizzle-orm";
 import { useEffect, useState } from "react";
 
+import PageError from "~/components/page-error";
 import { users as usersTable } from "~/server/db/schema";
 import { getOidcSubject } from "~/server/web/headscale-identity";
 import { Capabilities } from "~/server/web/roles";
@@ -168,3 +169,7 @@ export default function Page({ loaderData }: Route.ComponentProps) {
     </>
   );
 }
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  return <PageError error={error} page="Users" />;
+}