fix: handle headscale unavailability gracefully

app/layouts/dashboard.tsx

@@ -1,77 +1,77 @@
 import { type LoaderFunctionArgs, redirect } from 'react-router';
-import { Outlet, useLoaderData, useNavigation } from 'react-router';
-import { ProgressBar } from 'react-aria-components';
+import { Outlet, useLoaderData } from 'react-router';
+import { useEffect } from 'react'
 
 import { ErrorPopup } from '~/components/Error';
 import Header from '~/components/Header';
+import { toast } from '~/components/Toaster';
 import Footer from '~/components/Footer';
 import Link from '~/components/Link';
+import { useLiveData } from '~/utils/useLiveData'
 import { cn } from '~/utils/cn';
 import { loadContext } from '~/utils/config/headplane';
-import { HeadscaleError, pull } from '~/utils/headscale';
+import { HeadscaleError, pull, healthcheck } from '~/utils/headscale';
 import { destroySession, getSession } from '~/utils/sessions.server';
+import { XCircleFillIcon } from '@primer/octicons-react';
+import log from '~/utils/log';
 
 export async function loader({ request }: LoaderFunctionArgs) {
-	const session = await getSession(request.headers.get('Cookie'));
-	if (!session.has('hsApiKey')) {
-		return redirect('/login');
-	}
-
+	let healthy = false;
 	try {
-		await pull('v1/apikey', session.get('hsApiKey')!);
+		healthy = await healthcheck();
 	} catch (error) {
-		if (error instanceof HeadscaleError) {
-			// Safest to just redirect to login if we can't pull
-			return redirect('/login', {
-				headers: {
-					'Set-Cookie': await destroySession(session),
-				},
-			});
-		}
-
-		// Otherwise propagate to boundary
-		throw error;
+		log.debug('APIC', 'Healthcheck failed %o', error);
+	}
+
+	// We shouldn't session invalidate if Headscale is down
+	if (healthy) {
+		// We can assert because shell ensures this is set
+		const session = await getSession(request.headers.get('Cookie'));
+		const apiKey = session.get('hsApiKey')!;
+
+		try {
+			await pull('v1/apikey', apiKey);
+		} catch (error) {
+			if (error instanceof HeadscaleError) {
+				log.debug('APIC', 'API Key validation failed %o', error);
+				return redirect('/login', {
+					headers: {
+						'Set-Cookie': await destroySession(session),
+					},
+				});
+			}
+		}
 	}
 
-	const context = await loadContext();
 	return {
-		config: context.config,
-		url: context.headscalePublicUrl ?? context.headscaleUrl,
-		debug: context.debug,
-		user: session.get('user'),
-	};
+		healthy,
+	}
 }
 
 export default function Layout() {
-	const data = useLoaderData<typeof loader>();
-	const nav = useNavigation();
+	useLiveData({ interval: 3000 });
+	const { healthy } = useLoaderData<typeof loader>()
 
 	return (
 		<>
-			<ProgressBar aria-label="Loading...">
-				<div
-					className={cn(
-						'fixed top-0 left-0 z-50 w-1/2 h-1',
-						'bg-blue-500 dark:bg-blue-400 opacity-0',
-						nav.state === 'loading' && 'animate-loading opacity-100',
-					)}
-				/>
-			</ProgressBar>
-			<Header data={data} />
+			{!healthy ? (
+				<div className={cn(
+					'fixed bottom-0 right-0 z-50 w-fit h-14',
+					'flex flex-col justify-center gap-1',
+				)}>
+					<div className={cn(
+						'flex items-center gap-1.5 mr-1.5 py-2 px-1.5',
+						'border rounded-lg text-white bg-red-500',
+						'border-red-600 dark:border-red-400 shadow-sm',
+					)}>
+						<XCircleFillIcon className="w-4 h-4 text-white" />
+						Headscale is unreachable
+					</div>
+				</div>
+			) : undefined}
 			<main className="container mx-auto overscroll-contain mt-4 mb-24">
 				<Outlet />
 			</main>
-			<Footer {...data} />
-		</>
-	);
-}
-
-export function ErrorBoundary() {
-	return (
-		<>
-			<Header />
-			<ErrorPopup type="embedded" />
-			<Footer url="Unknown" debug={false} />
 		</>
 	);
 }

app/layouts/shell.tsx

@@ -0,0 +1,33 @@
+import Header from '~/components/Header';
+import Footer from '~/components/Footer';
+import { getSession } from '~/utils/sessions.server';
+import { loadContext } from '~/utils/config/headplane';
+import { useLoaderData, LoaderFunctionArgs, Outlet, redirect } from 'react-router';
+
+// This loads the bare minimum for the application to function
+// So we know that if context fails to load then well, oops?
+export async function loader({ request }: LoaderFunctionArgs) {
+	const session = await getSession(request.headers.get('Cookie'));
+	if (!session.has('hsApiKey')) {
+		return redirect('/login');
+	}
+
+	const context = await loadContext();
+	return {
+		config: context.config,
+		url: context.headscalePublicUrl ?? context.headscaleUrl,
+		debug: context.debug,
+		user: session.get('user'),
+	};
+}
+
+export default function Shell() {
+	const data = useLoaderData<typeof loader>();
+	return (
+		<>
+			<Header {...data} />
+			<Outlet />
+			<Footer {...data} />
+		</>
+	)
+}