fortify dashboard mothership connection

packages/dashboard/src/routes/+layout.svelte

@@ -9,6 +9,7 @@
   // @ts-ignore
   import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'
   import PromoBanner from './PromoBanner.svelte'
+  import MothershipStatus from './MothershipStatus.svelte'
 
   onMount(() => {
     init()
@@ -18,6 +19,7 @@
 <Meta />
 
 <div>
+  <MothershipStatus />
   <Navbar />
   <PromoBanner />
 

packages/dashboard/src/routes/MothershipStatus.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { isMothershipReachable } from '$util/stores'
+</script>
+
+{#if !$isMothershipReachable}
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+    <div class="alert alert-error max-w-2xl mx-4">
+      <div class="text-center">
+        <h2 class="text-xl font-bold mb-2">Connection Lost</h2>
+        <p>
+          The PocketHost mothership is temporarily unreachable. Your instances
+          are safe and still reachable. Go to the <a
+            href="https://status.pockethost.io"
+            class="link font-semibold underline">status page</a
+          > for more information.
+        </p>
+      </div>
+    </div>
+  </div>
+{/if}

packages/dashboard/src/util/stores.ts

@@ -23,6 +23,7 @@ try {
   console.warn(e)
 }
 
+export const isMothershipReachable = writable(true)
 export const isUserLegacy = writable(false)
 export const userSubscriptionType = writable(SubscriptionType.Legacy)
 export const isUserPaid = writable(false)
@@ -43,12 +44,19 @@ export const stats = writable<{
 export const init = () => {
   const { onAuthChange } = client()
 
-  client()
-    .client.send(`/api/stats`, {})
-    .then((res) => {
-      stats.set(res)
-    })
-    .catch(console.error)
+  const checkStats = () => {
+    client()
+      .client.send(`/api/stats`, {})
+      .then((res) => {
+        stats.set(res)
+        setTimeout(checkStats, 1000 * 60 * 5)
+      })
+      .catch(() => {
+        isMothershipReachable.set(false)
+        setTimeout(checkStats, 1000)
+      })
+  }
+  checkStats()
 
   onAuthChange((authStoreProps) => {
     const isLoggedIn = authStoreProps.isValid
@@ -93,15 +101,35 @@ export const init = () => {
     globalInstancesStore.set(instances)
     globalInstancesStoreReady.set(true)
 
-    client()
-      .client.collection('instances')
-      .subscribe<InstanceFields>('*', (data) => {
-        globalInstancesStore.update((instances) => {
-          instances[data.record.id] = data.record
-          return instances
+    const tryInstanceSubscribe = () => {
+      client()
+        .client.collection('instances')
+        .subscribe<InstanceFields>('*', (data) => {
+          globalInstancesStore.update((instances) => {
+            instances[data.record.id] = data.record
+            return instances
+          })
         })
-      })
-      .then((u) => (unsub = u))
-      .catch(console.error)
+        .then((u) => {
+          unsub = u
+        })
+        .catch(() => {
+          console.error('Failed to subscribe to instances')
+          isMothershipReachable.set(false)
+          setTimeout(tryInstanceSubscribe, 1000)
+        })
+    }
+    tryInstanceSubscribe()
   })
+
+  setInterval(() => {
+    client()
+      .client.send(`/api/health`, {})
+      .then((res) => {
+        isMothershipReachable.set(true)
+      })
+      .catch(() => {
+        isMothershipReachable.set(false)
+      })
+  }, 5000)
 }