feat: message for connection error

frontend/src/api/utils.js

@@ -8,13 +8,18 @@ export async function fetchURL(url, opts) {
 
   let { headers, ...rest } = opts;
 
-  const res = await fetch(`${baseURL}${url}`, {
-    headers: {
-      "X-Auth": store.state.jwt,
-      ...headers,
-    },
-    ...rest,
-  });
+  let res;
+  try {
+    res = await fetch(`${baseURL}${url}`, {
+      headers: {
+        "X-Auth": store.state.jwt,
+        ...headers,
+      },
+      ...rest,
+    });
+  } catch (error) {
+    return { status: 0 };
+  }
 
   if (res.headers.get("X-Renew-Token") === "true") {
     await renew(store.state.jwt);

frontend/src/i18n/en.json

@@ -43,7 +43,8 @@
   "errors": {
     "forbidden": "You don't have permissions to access this.",
     "internal": "Something really went wrong.",
-    "notFound": "This location can't be reached."
+    "notFound": "This location can't be reached.",
+    "connection": "The server can't be reached."
   },
   "files": {
     "body": "Body",

frontend/src/views/Errors.vue

@@ -3,8 +3,8 @@
     <header-bar v-if="showHeader" showMenu showLogo />
 
     <h2 class="message">
-      <i class="material-icons">{{ icon }}</i>
-      <span>{{ message }}</span>
+      <i class="material-icons">{{ info.icon }}</i>
+      <span>{{ $t(info.message) }}</span>
     </h2>
   </div>
 </template>
@@ -13,6 +13,10 @@
 import HeaderBar from "@/components/header/HeaderBar";
 
 const errors = {
+  0: {
+    icon: "cloud_off",
+    message: "errors.connection",
+  },
   403: {
     icon: "error",
     message: "errors.forbidden",
@@ -33,11 +37,17 @@ export default {
     HeaderBar,
   },
   props: ["errorCode", "showHeader"],
-  data: function () {
-    return {
-      icon: errors[this.errorCode].icon,
-      message: this.$t(errors[this.errorCode].message),
-    };
+  computed: {
+    code() {
+      return this.errorCode === "0" ||
+        this.errorCode === "404" ||
+        this.errorCode === "403"
+        ? parseInt(this.errorCode)
+        : 500;
+    },
+    info() {
+      return errors[this.code];
+    },
   },
 };
 </script>

frontend/src/views/Files.vue

@@ -4,7 +4,7 @@
 
     <breadcrumbs base="/files" />
 
-    <errors v-if="error" :errorCode="errorCode" />
+    <errors v-if="error" :errorCode="error.message" />
     <component v-else-if="currentView" :is="currentView"></component>
     <div v-else>
       <h2 class="message delayed">
@@ -67,11 +67,6 @@ export default {
         return "preview";
       }
     },
-    errorCode() {
-      return this.error.message === "404" || this.error.message === "403"
-        ? parseInt(this.error.message)
-        : 500;
-    },
   },
   created() {
     this.fetchData();

frontend/src/views/Share.vue

@@ -60,7 +60,7 @@
           </div>
         </div>
       </div>
-      <errors v-else :errorCode="errorCode" />
+      <errors v-else :errorCode="error.message" />
     </div>
     <div v-else>
       <div class="share">
@@ -230,11 +230,6 @@ export default {
     humanTime: function () {
       return moment(this.req.modified).fromNow();
     },
-    errorCode() {
-      return this.error.message === "404" || this.error.message === "403"
-        ? parseInt(this.error.message)
-        : 500;
-    },
   },
   methods: {
     ...mapMutations(["resetSelected", "updateRequest", "setLoading"]),