From c3645c90242ba6fabc62881534b138f098041398 Mon Sep 17 00:00:00 2001
From: LASER-Yi <liangyi0007@gmail.com>
Date: Tue, 14 Jun 2022 22:13:28 +0800
Subject: [PATCH] Improve error handling on UI

---
 frontend/src/apis/queries/client.ts       | 46 +++++++++++++++++------
 frontend/src/modules/task/notification.ts |  9 +++++
 frontend/src/types/api.d.ts               |  5 +++
 3 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/frontend/src/apis/queries/client.ts b/frontend/src/apis/queries/client.ts
index b89060bf5..8dc352310 100644
--- a/frontend/src/apis/queries/client.ts
+++ b/frontend/src/apis/queries/client.ts
@@ -1,8 +1,19 @@
 import SocketIO from "@/modules/socketio";
+import { notification } from "@/modules/task";
 import { LOG } from "@/utilities/console";
 import { setLoginRequired } from "@/utilities/event";
+import { showNotification } from "@mantine/notifications";
 import Axios, { AxiosError, AxiosInstance, CancelTokenSource } from "axios";
 import { Environment } from "../../utilities";
+
+function GetErrorMessage(data: unknown, defaultMsg = "Unknown error"): string {
+  if (typeof data === "string") {
+    return data;
+  } else {
+    return defaultMsg;
+  }
+}
+
 class BazarrClient {
   axios!: AxiosInstance;
   source!: CancelTokenSource;
@@ -36,32 +47,43 @@ class BazarrClient {
         if (resp.status >= 200 && resp.status < 300) {
           return Promise.resolve(resp);
         } else {
-          this.handleError(resp.status);
+          const error: BackendError = {
+            code: resp.status,
+            message: GetErrorMessage(resp.data),
+          };
+          this.handleError(error);
           return Promise.reject(resp);
         }
       },
       (error: AxiosError) => {
-        if (error.response) {
-          const response = error.response;
-          this.handleError(response.status);
-        } else {
-          error.message = "You have disconnected to Bazarr backend";
-        }
+        const message = GetErrorMessage(
+          error.response?.data,
+          "You have disconnected from the server"
+        );
+
+        const backendError: BackendError = {
+          code: error.response?.status ?? 500,
+          message,
+        };
+
+        error.message = backendError.message;
+        this.handleError(backendError);
+
         return Promise.reject(error);
       }
     );
   }
 
-  handleError(code: number) {
+  handleError(error: BackendError) {
+    const { code, message } = error;
     switch (code) {
       case 401:
         setLoginRequired();
         break;
-      case 500:
-        break;
-      default:
-        break;
     }
+    LOG("error", "A error has occurred", code);
+
+    showNotification(notification.error(`Error ${code}`, message));
   }
 }
 
diff --git a/frontend/src/modules/task/notification.ts b/frontend/src/modules/task/notification.ts
index c2095ab98..a9d7246c5 100644
--- a/frontend/src/modules/task/notification.ts
+++ b/frontend/src/modules/task/notification.ts
@@ -18,6 +18,15 @@ export const notification = {
     };
   },
 
+  error: (title: string, message: string): NotificationProps => {
+    return {
+      title,
+      message,
+      color: "red",
+      autoClose: 7 * 1000,
+    };
+  },
+
   PROGRESS_TIMEOUT: 10 * 1000,
 
   progress: {
diff --git a/frontend/src/types/api.d.ts b/frontend/src/types/api.d.ts
index 8dff5e5ec..5451fe71b 100644
--- a/frontend/src/types/api.d.ts
+++ b/frontend/src/types/api.d.ts
@@ -275,3 +275,8 @@ type ItemSearchResult = Partial<SeriesIdType> &
     title: string;
     year: string;
   };
+
+type BackendError = {
+  code: number;
+  message: string;
+};