Add offline overlay if backend cannot be reached

dashboard/src/Index.vue

@@ -1,12 +1,13 @@
 <script setup>
 
-import { onMounted, ref } from 'vue';
-import { Notification } from 'pankow';
+import { onMounted, ref, useTemplateRef } from 'vue';
+import { Notification, fetcher } from 'pankow';
 import { API_ORIGIN, TOKEN_TYPES } from './constants.js';
 import ProfileModel from './models/ProfileModel.js';
 import DashboardModel from './models/DashboardModel.js';
 import Sidebar from './components/Sidebar.vue';
 import Headerbar from './components/Headerbar.vue';
+import OfflineOverlay from './components/OfflineOverlay.vue';
 import AppsView from './views/AppsView.vue';
 import AppConfigureView from './views/AppConfigureView.vue';
 import AppstoreView from './views/AppstoreView.vue';
@@ -53,6 +54,37 @@ const VIEWS = {
   VOLUMES: 'volumes',
 };
 
+const offlineOverlay = useTemplateRef('offlineOverlay');
+
+function onOnline() {
+  ready.value = true;
+}
+
+fetcher.globalOptions.errorHook = (error) => {
+  // network error, request killed by browser
+  if (error instanceof TypeError) {
+    ready.value = false;
+    return offlineOverlay.value.open();
+  }
+
+  // // re-login will make the code get a new token
+  // if (status === 401) return client.login();
+
+  if (error.status === 500 || error.status === 501) {
+    // actual internal server error, most likely a bug or timeout log to console only to not alert the user
+    if (!ready.value) {
+      console.error(error);
+      console.log('------\nCloudron Internal Error\n\nIf you see this, please send a mail with above log to support@cloudron.io\n------\n');
+    }
+  }
+
+  if (error.status >= 500) {
+    // This means the box service is not reachable. We just show offline banner for now
+    ready.value = false;
+    return offlineOverlay.value.open();
+  }
+};
+
 const dashboardModel = DashboardModel.create();
 const profileModel = ProfileModel.create();
 
@@ -147,6 +179,7 @@ onMounted(async () => {
 <template>
   <div style="overflow: hidden; height: 100%;">
     <Notification />
+    <OfflineOverlay ref="offlineOverlay" @online="onOnline()"/>
 
     <Transition name="pankow-animation-pop-up">
       <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">