fix: bound stalled dashboard navigations (#353)

frontend/service-worker.js

@@ -1,7 +1,8 @@
 const BASE = new URL('./', self.location.href).pathname;
 importScripts(BASE + 'static/background-issue-sync.js');
-const CACHE = 'stackchain-dashboard-shell-v42';
+const CACHE = 'stackchain-dashboard-shell-v43';
 const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
+const NAVIGATION_TIMEOUT_MS = self.__STACKCHAIN_NAVIGATION_TIMEOUT_MS || 4000;
 const SHELL = [
   BASE,
   BASE + 'manifest.webmanifest',
@@ -44,6 +45,25 @@ const SHELL = [
   BASE + 'static/background-issue-sync.js',
 ];
 
+async function fetchNavigation(request) {
+  const controller = new AbortController();
+  let timeout;
+  const deadline = new Promise((resolve, reject) => {
+    timeout = setTimeout(() => {
+      controller.abort();
+      reject(new Error('Dashboard navigation timed out.'));
+    }, NAVIGATION_TIMEOUT_MS);
+  });
+  try {
+    return await Promise.race([
+      fetch(request, { signal: controller.signal }),
+      deadline,
+    ]);
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+
 async function sessionCsrf(signal) {
   const response = await fetch(new URL(BASE + 'api/v1/session', self.location.origin), {
     headers: { Accept: 'application/json' },
@@ -182,7 +202,7 @@ self.addEventListener('fetch', event => {
   if (url.origin !== self.location.origin || !url.pathname.startsWith(BASE)) return;
   if (request.mode === 'navigate') {
     event.respondWith(
-      fetch(request).then(async response => {
+      fetchNavigation(request).then(async response => {
         const cache = await caches.open(CACHE);
         const responseUrl = new URL(response.url || request.url);
         const isDashboardShell = responseUrl.origin === self.location.origin && responseUrl.pathname === BASE;
@@ -195,7 +215,11 @@ self.addEventListener('fetch', event => {
         return response;
       }).catch(async () => {
         const cache = await caches.open(CACHE);
-        return cache.match(BASE);
+        const cached = await cache.match(BASE);
+        return cached || new Response(
+          'Stackchain is offline and the dashboard is not cached yet. Reconnect and try again.',
+          { status: 504, headers: { 'Content-Type': 'text/plain; charset=utf-8' } },
+        );
       })
     );
     return;