errors handled

admin/src/components.d.ts

@@ -5,6 +5,7 @@ import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']

admin/src/layout/components/content.vue

@@ -2,7 +2,19 @@
     <router-view v-slot="{Component}">
         <transition name="fade-transform" mode="out-in">
             <keep-alive>
-                <component :is="Component" :key="key" />
+                <div>
+                    <a-alert
+                        v-if="errLines[0]"
+                        type="error"
+                        closable
+                        @close="onClose"
+                    >
+                        <template v-slot:description>
+                            <span v-for="ln of errLines">{{ln}} <br/> </span>
+                        </template>
+                    </a-alert>
+                    <component :is="Component" :key="key" />
+                </div>
             </keep-alive>
         </transition>
     </router-view>
@@ -10,8 +22,18 @@
 <script setup lang='ts'>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { sleep } from '/@/utils/util'
+import { useLayoutStore } from '/@/store/modules/layout'
 
 const route = useRoute()
 
 const key = computed(() => route.path)
+
+const layoutStore = useLayoutStore()
+const errLines = computed(() => layoutStore.globalError.split("\n"))
+const onClose = async (e: MouseEvent) => {
+    await sleep(1000)
+    layoutStore.setGlobalError("")
+}
+
 </script>

admin/src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from '/@/router/index'
 import { pinia } from '/@/store'
+import { useLayoutStore } from '/@/store/modules/layout'
 import '/@/permission'
 
 import '/@/assets/css/index.css'
@@ -11,3 +12,22 @@ const app = createApp(App)
 app.use(router)
 app.use(pinia)
 app.mount('#app')
+
+
+window.onunhandledrejection = (ev: PromiseRejectionEvent) => {
+  showAlert(ev.reason.stack || ev.reason.message)
+
+}
+window.onerror = err => {
+  if (typeof err === "string") {
+    return showAlert(err)
+  }
+  showAlert(JSON.stringify(err))
+}
+
+function showAlert(msg: string) {
+  let layout = useLayoutStore()
+  if (!layout.globalError) {
+    layout.setGlobalError(msg)
+  }
+}

admin/src/store/modules/layout.ts

@@ -13,6 +13,7 @@ export const useLayoutStore = defineStore({
             isLoading: false
         },
         dtmVersion: "",
+        globalError: "",
     }),
     getters: {
         getMenubar(): IMenubar {
@@ -26,6 +27,9 @@ export const useLayoutStore = defineStore({
         setRoutes(data: Array<IMenubarList>): void {
             this.menubar.menuList = data
         },
+        setGlobalError(err: string) {
+            this.globalError = err
+        },
         concatAllowRoutes(): void {
             allowRouter.reverse().forEach(v => this.menubar.menuList.unshift(v))
         },

admin/src/type/store/layout.ts

@@ -6,6 +6,7 @@ export interface ILayout {
   menubar: IMenubar
   status: IStatus
   dtmVersion: string
+  globalError: string
 }
 
 export interface IStatus {

admin/src/utils/util.ts

@@ -1,9 +1,9 @@
 import { useRoute } from 'vue-router';
 import { IMenubarList } from '../type/store/layout';
 
-export const findCurrentMenubar = (menuList: IMenubarList[], root?:boolean) => {
+export const findCurrentMenubar = (menuList: IMenubarList[], root?: boolean) => {
     const route = useRoute()
-    let arr:IMenubarList[] | IMenubarList = []
+    let arr: IMenubarList[] | IMenubarList = []
     for (let i = 0; i < menuList.length; i++) {
         const v = menuList[i];
         const usePath = v.meta.activeMenu || v.redirect || v.path;
@@ -21,3 +21,7 @@ export const findCurrentMenubar = (menuList: IMenubarList[], root?:boolean) => {
 
     return arr
 }
+
+export const sleep = async (ms: number) => {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}