fix(caddy): add 404 error page; add health checks and lb_try_duration to ui upstream

- Add caddy/errors/404.html (matches existing 502/503/504 style) - Add handle_errors 404 block in Caddyfile - Add active health checks (5s interval) and lb_try_duration 3s to the ui reverse_proxy so Caddy detects Watchtower container replacements quickly and serves the 502 maintenance page instead of a raw error
2026-03-28 21:32:04 +05:00
2 changed files with 71 additions and 1 deletions
--- a/21
+++ b/21
@@ -170,12 +170,31 @@
 	# ── SvelteKit UI (catch-all — includes all remaining /api/* routes) ───────
 	handle {
 		reverse_proxy ui:3000 {
-	}
+			# Active health check: Caddy polls /health every 5 s and marks the
+			# upstream down immediately when it fails. Combined with
+			# lb_try_duration this means Watchtower container replacements
+			# show the maintenance page within a few seconds instead of
+			# hanging or returning a raw connection error to the browser.
+			health_uri      /health
+			health_interval 5s
+			health_timeout  2s
+			health_status   200
+
+			# If the upstream is down, fail fast (don't retry for longer than
+			# 3 s) and let Caddy's handle_errors 502/503 take over.
+			lb_try_duration 3s
+		}
+	}

 	# ── Caddy-level error pages ───────────────────────────────────────────────
 	# These fire when the upstream (backend or ui) is completely unreachable.
 	# SvelteKit's own +error.svelte handles application-level errors (404, 500).
 	handle_errors 404 {
+		root * /srv/errors
+		rewrite * /404.html
+		file_server
+	}
+	handle_errors 502 {
 		root * /srv/errors
 		rewrite * /502.html
 		file_server
--- a/caddy/errors/404.html
+++ b/caddy/errors/404.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>404 — Page Not Found</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      min-height: 100svh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      background: #09090b;
+      color: #a1a1aa;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      padding: 2rem;
+      text-align: center;
+    }
+    .code {
+      font-size: clamp(4rem, 20vw, 8rem);
+      font-weight: 800;
+      color: #27272a;
+      line-height: 1;
+      letter-spacing: -0.04em;
+    }
+    h1 { font-size: 1.25rem; font-weight: 600; color: #e4e4e7; }
+    p  { font-size: 0.9rem; max-width: 36ch; line-height: 1.6; }
+    a  {
+      margin-top: 0.5rem;
+      display: inline-block;
+      padding: 0.6rem 1.4rem;
+      border-radius: 0.5rem;
+      background: #f59e0b;
+      color: #000;
+      font-weight: 600;
+      font-size: 0.875rem;
+      text-decoration: none;
+    }
+    a:hover { background: #d97706; }
+  </style>
+</head>
+<body>
+  <div class="code">404</div>
+  <h1>Page Not Found</h1>
+  <p>The page you're looking for doesn't exist or has been moved.</p>
+  <a href="/">Go home</a>
+</body>
+</html>