Let the user know when we're getting gateway errors

lib/www/client/source/src/components/footer.vue

@@ -10,7 +10,10 @@
 	<v-spacer></v-spacer>
 
 	<template v-if="isFrontendRemote">
-      <v-icon v-if="serverConnected" class="mr-6" title="Connected to server via gateway">mdi-cloud-outline</v-icon>
+      <template v-if="serverConnected">
+        <v-icon v-if="isGatewayReliable" class="mr-6" title="Connected to server via gateway">mdi-cloud-outline</v-icon>
+        <v-icon v-else class="mr-6" color="orange" title="Gateway connection is unreliable. Expect outages.">mdi-cloud-off</v-icon>
+      </template>
       <v-icon v-else class="mr-6" color="red" :title="`Server connection lost: the gateway cannot reach the remote server.\nWe will reconnect automatically when the link with the remote server is restored.`">mdi-cloud-off</v-icon>
 	</template>
 	<template v-else>
@@ -65,8 +68,20 @@ export default {
 
     ...mapState({
       serverConnected: state => state.notify.serverConnected,
-      isFrontendRemote: state => state.api.serverInfo?.["remote-frontend"] ?? false
+      isFrontendRemote: state => state.api.serverInfo?.["remote-frontend"] ?? false,
+      isGatewayReliable: state => state.api.isGatewayReliable
     })
+  },
+
+  watch: {
+
+    isGatewayReliable (val) {
+      if (val === false) {
+        this.$root.showSnack("Gateway error", "warning");
+      }
+    }
+
   }
+
 };
 </script>

lib/www/client/source/src/store/modules/api/actions.js

@@ -71,7 +71,7 @@ async function api ({state, getters, commit, dispatch}, [resource, init = {}, cb
       res = await limiter.enqueue(async () => await fetch(url, init));
     }
 
-    if (cache && !isCached) {
+    if (cache && !isCached && res.ok) { // Only cache successful responses
       cache.put(url, res.clone());
     }
 
@@ -95,6 +95,12 @@ async function api ({state, getters, commit, dispatch}, [resource, init = {}, cb
           return [key, value];
         });
         state.serverInfo = entries.length ? Object.fromEntries(entries) : {};
+
+        if (state.serverInfo["remote-frontend"]) {
+          state.isGatewayReliable = ![ 502, 503, 504 ].includes(res.status);
+        } else {
+          state.isGatewayReliable = null;
+        }
     }
 
     if (res.ok) {

lib/www/client/source/src/store/modules/api/state.js

@@ -2,7 +2,8 @@ const state = () => ({
   apiUrl: "/api",
   requestsCount: 0,
   maxConcurrent: 15,
-  serverInfo: {} // Contents of the last received X-Dougal-Server HTTP header
+  serverInfo: {}, // Contents of the last received X-Dougal-Server HTTP header
+  isGatewayReliable: null, // True if we start seeing HTTP 502‒504 responses
 });
 
 export default state;