pref: catch global error and show with notification component

frontend/src/langs/en.json

@@ -5,6 +5,7 @@
   "cancel": "Cancel",
   "success": "Success",
   "warning": "Warning",
+  "error": "Error",
   "save": "Save",
   "none": "None",
   "default": "Default",

frontend/src/langs/zh-cn.json

@@ -5,6 +5,7 @@
   "cancel": "取消",
   "success": "成功",
   "warning": "警告",
+  "error": "错误",
   "save": "保存",
   "none": "无",
   "default": "默认",

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')
 }
 

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)
 }