From aef8830911621103108d11ea1bc8c6a4bf526c86 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Mon, 28 Aug 2023 01:02:25 +0800
Subject: [PATCH] pref: catch global error and show with notification component

---
 frontend/src/langs/en.json     |  1 +
 frontend/src/langs/zh-cn.json  |  1 +
 frontend/src/main.js           | 12 ++++++++++++
 frontend/src/utils/discrete.js | 29 ++++++++++++++++++++++++++++-
 4 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index aab36f3..27ab80c 100644
--- a/frontend/src/langs/en.json
+++ b/frontend/src/langs/en.json
@@ -5,6 +5,7 @@
   "cancel": "Cancel",
   "success": "Success",
   "warning": "Warning",
+  "error": "Error",
   "save": "Save",
   "none": "None",
   "default": "Default",
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index bbe75be..c0cc079 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -5,6 +5,7 @@
   "cancel": "取消",
   "success": "成功",
   "warning": "警告",
+  "error": "错误",
   "save": "保存",
   "none": "无",
   "default": "默认",
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 8192c13..5af28c6 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -20,6 +20,18 @@ async function setupApp() {
     const prefStore = usePreferencesStore()
     await prefStore.loadPreferences()
     await setupDiscreteApi()
+    app.config.errorHandler = (err, instance, info) => {
+        // TODO: add "send error message to author" later
+        $notification.error({
+            title: i18n.global.t('error'),
+            content: err.toString(),
+            // meta: err.stack,
+        })
+        console.error(err)
+    }
+    app.config.warnHandler = (message) => {
+        console.warn(message)
+    }
     app.mount('#app')
 }
 
diff --git a/frontend/src/utils/discrete.js b/frontend/src/utils/discrete.js
index 7b39dbd..ffbbe0c 100644
--- a/frontend/src/utils/discrete.js
+++ b/frontend/src/utils/discrete.js
@@ -13,6 +13,8 @@ function setupMessage(message) {
             return message.info(content, option)
         },
         loading: (content, option = null) => {
+            option.duration = option.duration || 30000
+            option.keepAliveOnHover = option.keepAliveOnHover !== undefined ? option.keepAliveOnHover : true
             return message.loading(content, option)
         },
         success: (content, option = null) => {
@@ -24,6 +26,26 @@ function setupMessage(message) {
     }
 }
 
+function setupNotification(notification) {
+    return {
+        error: (content, option = null) => {
+            option.title = option.title || i18nGlobal.t('error')
+            return notification.error(content, option)
+        },
+        info: (content, option = null) => {
+            return notification.info(content, option)
+        },
+        success: (content, option = null) => {
+            option.title = option.title || i18nGlobal.t('success')
+            return notification.success(content, option)
+        },
+        warning: (content, option = null) => {
+            option.title = option.title || i18nGlobal.t('warning')
+            return notification.warning(content, option)
+        },
+    }
+}
+
 function setupDialog(dialog) {
     return {
         warning: (content, onConfirm) => {
@@ -53,13 +75,18 @@ export async function setupDiscreteApi() {
         theme: prefStore.isDark ? darkTheme : undefined,
         themeOverrides,
     }))
-    const { message, dialog } = createDiscreteApi(['message', 'dialog'], {
+    const { message, dialog, notification } = createDiscreteApi(['message', 'notification', 'dialog'], {
         configProviderProps,
         messageProviderProps: {
             placement: 'bottom-right',
         },
+        notificationProviderProps: {
+            placement: 'top-right',
+            keepAliveOnHover: true,
+        },
     })
 
     window.$message = setupMessage(message)
+    window.$notification = setupNotification(notification)
     window.$dialog = setupDialog(dialog)
 }