Use StatusError as error type in views

frontend/src/views/Errors.vue

@@ -40,10 +40,16 @@ const errors: {
   },
 };
 
-const props = defineProps<{
+const props = withDefaults(
-  errorCode: number;
+  defineProps<{
-  showHeader?: boolean;
+    errorCode?: number;
-}>();
+    showHeader?: boolean;
+  }>(),
+  {
+    errorCode: 500,
+    showHeader: false,
+  }
+);
 
 const info = computed(() => {
   return errors[props.errorCode] ? errors[props.errorCode] : errors[500];

frontend/src/views/Files.vue

@@ -8,7 +8,7 @@
 
     <breadcrumbs base="/files" />
 
-    <Errors v-if="error" :errorCode="error?.status" />
+    <errors v-if="error" :errorCode="error.status" />
     <component v-else-if="currentView" :is="currentView"></component>
     <div v-else>
       <h2 class="message delayed">
@@ -46,6 +46,7 @@ import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import Preview from "@/views/files/Preview.vue";
 import FileListing from "@/views/files/FileListing.vue";
+import { StatusError } from "@/api/utils";
 const Editor = defineAsyncComponent(() => import("@/views/files/Editor.vue"));
 
 const layoutStore = useLayoutStore();
@@ -63,7 +64,7 @@ const clean = (path: string) => {
   return path.endsWith("/") ? path.slice(0, -1) : path;
 };
 
-const error = ref<any | null>(null);
+const error = ref<StatusError | null>(null);
 
 const currentView = computed(() => {
   if (fileStore.req?.type === undefined) {
@@ -134,8 +135,10 @@ const fetchData = async () => {
 
     fileStore.updateRequest(res);
     document.title = `${res.name} - ${document.title}`;
-  } catch (e: any) {
+  } catch (err) {
-    error.value = e;
+    if (err instanceof StatusError || err instanceof Error) {
+      error.value = err;
+    }
   } finally {
     layoutStore.loading = false;
   }

frontend/src/views/Share.vue

@@ -197,8 +197,9 @@ import { useLayoutStore } from "@/stores/layout";
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { StatusError } from "@/api/utils";
 
-const error = ref<null | any>(null);
+const error = ref<StatusError | null>(null);
 const showLimit = ref<number>(100);
 const password = ref<string>("");
 const attemptedPasswordLogin = ref<boolean>(false);
@@ -279,8 +280,10 @@ const fetchData = async () => {
 
     fileStore.updateRequest(file);
     document.title = `${file.name} - ${document.title}`;
-  } catch (e) {
+  } catch (err) {
-    error.value = e;
+    if (err instanceof StatusError || err instanceof Error) {
+      error.value = err;
+    }
   } finally {
     layoutStore.loading = false;
   }

frontend/src/views/settings/Global.vue

@@ -158,7 +158,6 @@
         <div class="card-content">
           <p class="small">{{ t("settings.defaultUserDescription") }}</p>
 
-          <!-- TODO: idk how to fix this ts error -->
           <user-form
             :isNew="false"
             :isDefault="true"
@@ -240,8 +239,9 @@ import Themes from "@/components/settings/Themes.vue";
 import Errors from "@/views/Errors.vue";
 import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
+import { StatusError } from "@/api/utils";
 
-const error = ref<any>(null);
+const error = ref<StatusError | null>(null);
 const originalSettings = ref<ISettings | null>(null);
 const settings = ref<ISettings | null>(null);
 const debounceTimeout = ref<number | null>(null);
@@ -381,8 +381,10 @@ onMounted(async () => {
     originalSettings.value = original;
     settings.value = newSettings;
     shellValue.value = newSettings.shell.join("\n");
-  } catch (e) {
+  } catch (err) {
-    error.value = e;
+    if (err instanceof StatusError || err instanceof Error) {
+      error.value = err;
+    }
   } finally {
     layoutStore.loading = false;
   }

frontend/src/views/settings/Shares.vue

@@ -1,5 +1,5 @@
 <template>
-  <errors v-if="error" :errorCode="error.status ?? 400" />
+  <errors v-if="error" :errorCode="error.status" />
   <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <div class="card">

frontend/src/views/settings/Users.vue

@@ -1,5 +1,5 @@
 <template>
-  <errors v-if="error" :errorCode="error.status ?? 400" />
+  <errors v-if="error" :errorCode="error.status" />
   <div class="row" v-else-if="!layoutStore.loading">
     <div class="column">
       <div class="card">