From: Adam Dullage <redacted>
Date: Tue, 7 May 2024 19:59:30 +0000 (+0100)
Subject: Centralise generic API error handling
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=f6ab2fd79556252ac087eadbfa960894c846d401;p=flatnotes.git

Centralise generic API error handling
---

diff --git a/client/App.vue b/client/App.vue
index 66c290e..4591eff 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -18,10 +18,10 @@ import { useToast } from "primevue/usetoast";
 import { computed, ref } from "vue";
 import { RouterView, useRoute } from "vue-router";
 
-import { getConfig } from "./api.js";
+import { getConfig, apiErrorHandler } from "./api.js";
 import PrimeToast from "./components/PrimeToast.vue";
 import { useGlobalStore } from "./globalStore.js";
-import { getUnknownServerErrorToastOptions, loadTheme } from "./helpers.js";
+import { loadTheme } from "./helpers.js";
 import NavBar from "./partials/NavBar.vue";
 import SearchModal from "./partials/SearchModal.vue";
 import { loadStoredToken } from "./tokenStorage.js";
@@ -42,9 +42,10 @@ getConfig()
   .then((data) => {
     globalStore.authType = data.authType;
   })
-  .catch(() => {
-    toast.add(getUnknownServerErrorToastOptions());
+  .catch((error) => {
+    apiErrorHandler(error, toast);
   });
+
 loadStoredToken();
 
 const showNavBar = computed(() => {
diff --git a/client/api.js b/client/api.js
index da86ccd..a6a6707 100644
--- a/client/api.js
+++ b/client/api.js
@@ -4,6 +4,7 @@ import { Note, SearchResult } from "./classes.js";
 
 import axios from "axios";
 import { getStoredToken } from "./tokenStorage.js";
+import { getToastOptions } from "./helpers.js";
 import router from "./router.js";
 
 const api = axios.create();
@@ -22,25 +23,43 @@ api.interceptors.request.use(
   },
 );
 
-api.interceptors.response.use(
-  function (response) {
-    return response;
-  },
-  function (error) {
-    // If the response is a 401 Unauthorized, redirect to the login page.
-    if (
-      error.response?.status === 401 &&
-      router.currentRoute.value.name !== "login"
-    ) {
-      const redirectPath = router.currentRoute.value.fullPath;
-      router.push({
-        name: "login",
-        query: { [constants.params.redirect]: redirectPath },
-      });
-    }
-    return Promise.reject(error);
-  },
-);
+// api.interceptors.response.use(
+//   function (response) {
+//     return response;
+//   },
+//   function (error) {
+//     // If the response is a 401 Unauthorized, redirect to the login page.
+//     if (
+//       error.response?.status === 401 &&
+//       router.currentRoute.value.name !== "login"
+//     ) {
+//       const redirectPath = router.currentRoute.value.fullPath;
+//       router.push({
+//         name: "login",
+//         query: { [constants.params.redirect]: redirectPath },
+//       });
+//     }
+//     return Promise.reject(error);
+//   },
+// );
+
+export function apiErrorHandler(error, toast) {
+  if (error.response?.status === 401) {
+    const redirectPath = router.currentRoute.value.fullPath;
+    router.push({
+      name: "login",
+      query: { [constants.params.redirect]: redirectPath },
+    });
+  } else {
+    toast.add(
+      getToastOptions(
+        "Unknown Error",
+        "Unknown error communicating with the server. Please try again.",
+        true,
+      ),
+    );
+  }
+}
 
 export async function getConfig() {
   try {
diff --git a/client/helpers.js b/client/helpers.js
index 290796b..a144ba0 100644
--- a/client/helpers.js
+++ b/client/helpers.js
@@ -8,14 +8,6 @@ export function getToastOptions(title, description, isFailure = false) {
   };
 }
 
-export function getUnknownServerErrorToastOptions() {
-  return getToastOptions(
-    "Unknown Error",
-    "Unknown error communicating with the server. Please try again.",
-    true,
-  );
-}
-
 export function setDarkThemeOn(save = true) {
   document.body.classList.add("dark");
   if (save) localStorage.setItem("darkTheme", "true");
diff --git a/client/views/Home.vue b/client/views/Home.vue
index 8857db2..c94e2c7 100644
--- a/client/views/Home.vue
+++ b/client/views/Home.vue
@@ -23,10 +23,9 @@ import { useToast } from "primevue/usetoast";
 import { ref } from "vue";
 import { RouterLink } from "vue-router";
 
-import { getNotes } from "../api.js";
+import { getNotes, apiErrorHandler } from "../api.js";
 import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";
-import { getUnknownServerErrorToastOptions } from "../helpers.js";
 import SearchInput from "../partials/SearchInput.vue";
 
 const notes = ref([]);
@@ -37,6 +36,6 @@ getNotes("*", "lastModified", "desc", 5)
     notes.value = data;
   })
   .catch((error) => {
-    toast.add(getUnknownServerErrorToastOptions(error));
+    apiErrorHandler(error, toast);
   });
 </script>
diff --git a/client/views/LogIn.vue b/client/views/LogIn.vue
index 05a9913..339c152 100644
--- a/client/views/LogIn.vue
+++ b/client/views/LogIn.vue
@@ -45,17 +45,14 @@ import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useToast } from "primevue/usetoast";
 
-import { getToken } from "../api.js";
+import { getToken, apiErrorHandler } from "../api.js";
 import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";
 import TextInput from "../components/TextInput.vue";
 import { authTypes } from "../constants.js";
 import { useGlobalStore } from "../globalStore.js";
 import { storeToken } from "../tokenStorage.js";
-import {
-  getToastOptions,
-  getUnknownServerErrorToastOptions,
-} from "../helpers.js";
+import { getToastOptions } from "../helpers.js";
 
 const props = defineProps({ redirect: String });
 
@@ -78,12 +75,12 @@ function logIn() {
         router.push({ name: "home" });
       }
     })
-    .catch((response) => {
+    .catch((error) => {
       username.value = "";
       password.value = "";
       totp.value = "";
 
-      if (response.response?.status === 401) {
+      if (error.response?.status === 401) {
         toast.add(
           getToastOptions(
             "Login Failed",
@@ -92,7 +89,7 @@ function logIn() {
           ),
         );
       } else {
-        toast.add(getUnknownServerErrorToastOptions());
+        apiErrorHandler(error, toast);
       }
     });
 }
diff --git a/client/views/Note.vue b/client/views/Note.vue
index 0ba885f..c3ccb75 100644
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -79,17 +79,20 @@ import { useToast } from "primevue/usetoast";
 import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 
-import { createNote, deleteNote, getNote, updateNote } from "../api.js";
+import {
+  createNote,
+  deleteNote,
+  getNote,
+  updateNote,
+  apiErrorHandler,
+} from "../api.js";
 import { Note } from "../classes.js";
 import ConfirmModal from "../components/ConfirmModal.vue";
 import CustomButton from "../components/CustomButton.vue";
 import LoadingIndicator from "../components/LoadingIndicator.vue";
 import ToastEditor from "../components/toastui/ToastEditor.vue";
 import ToastViewer from "../components/toastui/ToastViewer.vue";
-import {
-  getToastOptions,
-  getUnknownServerErrorToastOptions,
-} from "../helpers.js";
+import { getToastOptions } from "../helpers.js";
 
 const props = defineProps({
   title: String,
@@ -126,11 +129,11 @@ function init() {
         loadingIndicator.value.setLoaded();
       })
       .catch((error) => {
-        if (error.response.status === 404) {
+        if (error.response?.status === 404) {
           loadingIndicator.value.setFailed("Note not found", mdiNoteOffOutline);
         } else {
           loadingIndicator.value.setFailed();
-          toast.add(getUnknownServerErrorToastOptions());
+          apiErrorHandler(error, toast);
         }
       });
   } else {
@@ -155,8 +158,8 @@ function deleteConfirmedHandler() {
     .then(() => {
       router.push({ name: "home" });
     })
-    .catch(() => {
-      toast.add(getUnknownServerErrorToastOptions());
+    .catch((error) => {
+      apiErrorHandler(error, toast);
     });
 }
 
@@ -214,7 +217,7 @@ function noteSaveFailure(error) {
       ),
     );
   } else {
-    toast.add(getUnknownServerErrorToastOptions());
+    apiErrorHandler(error, toast);
   }
 }
 
diff --git a/client/views/SearchResults.vue b/client/views/SearchResults.vue
index 68e948f..f30ea1c 100644
--- a/client/views/SearchResults.vue
+++ b/client/views/SearchResults.vue
@@ -43,7 +43,6 @@ import { mdiMagnify } from "@mdi/js";
 import { getNotes } from "../api.js";
 import LoadingIndicator from "../components/LoadingIndicator.vue";
 import Tag from "../components/Tag.vue";
-import { getUnknownServerErrorToastOptions } from "../helpers.js";
 import SearchInput from "../partials/SearchInput.vue";
 
 const props = defineProps({ searchTerm: String });
@@ -63,9 +62,9 @@ function init() {
         loadingIndicator.value.setFailed("No Results", mdiMagnify);
       }
     })
-    .catch(() => {
+    .catch((error) => {
       loadingIndicator.value.setFailed();
-      toast.add(getUnknownServerErrorToastOptions());
+      apiErrorHandler(error, toast);
     });
 }