feat: 全局错误捕获管道

未处理的 Promise rejection 与 Vue 运行时错误统一弹窗，
解析 axios 响应与异常详情，支持复制与一键反馈到 GitHub

Author: Applesaber

ChuChartManager/Front/src/App.vue

@@ -5,6 +5,7 @@ import Sidebar from '@/components/Sidebar.vue'
 import StatusBar from '@/components/StatusBar.vue'
 import StartupErrorDialog from '@/components/StartupErrorDialog'
 import ChangelogModal from '@/components/ChangelogModal'
+import ErrorDialog from '@/components/ErrorDialog'
 import MusicList from '@/views/MusicList.vue'
 import Course from '@/views/Course/index'
 import ResourceManager from '@/views/ResourceManager/index'
@@ -50,6 +51,7 @@ const handleRefresh = () => {
       <GlobalElementsContainer />
       <StartupErrorDialog />
       <ChangelogModal :ready="ready" />
+      <ErrorDialog />
       <div class="main-layout">
         <Sidebar v-model:active="sidebarActive" @refresh="handleRefresh" />
         <div class="main-content">

ChuChartManager/Front/src/components/ErrorDialog.tsx

@@ -0,0 +1,64 @@
+import { defineComponent, ref } from 'vue'
+import { Modal, Button, addToast } from '@munet/ui'
+import { useI18n } from 'vue-i18n'
+import { errorDialogShow, errorMessage, errorDetail } from '@/utils/globalCapture'
+
+const REPO_URL = 'https://github.com/MuNET-OSS/ChuChartManager'
+
+export default defineComponent({
+  setup() {
+    const { t } = useI18n()
+    const showDetail = ref(false)
+
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(`${errorMessage.value}\n\n${errorDetail.value}`)
+        addToast({ message: t('error.copied'), type: 'success' })
+      } catch {
+        addToast({ message: t('error.copyFailed'), type: 'error' })
+      }
+    }
+
+    const report = () => {
+      const title = `[Bug] ${errorMessage.value}`.slice(0, 120)
+      const body = `## 问题描述\n\n\n## 错误信息\n\`\`\`\n${errorDetail.value}\n\`\`\``
+      const url = `${REPO_URL}/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`
+      window.open(url, '_blank')
+    }
+
+    return () => (
+      <Modal
+        width="min(85vw,45em)"
+        title={t('error.title')}
+        v-model:show={errorDialogShow.value}
+      >
+        {{
+          default: () => (
+            <div class="flex flex-col gap-3">
+              <div class="c-#d33 break-all">{errorMessage.value}</div>
+
+              <div
+                class="text-sm op-60 cursor-pointer flex items-center gap-1"
+                onClick={() => showDetail.value = !showDetail.value}
+              >
+                <div class={showDetail.value ? 'i-mdi-chevron-down' : 'i-mdi-chevron-right'} />
+                {t('error.detail')}
+              </div>
+              {showDetail.value && (
+                <pre class="text-xs bg-black/5 rd p-2 of-auto max-h-50vh whitespace-pre-wrap break-all m-0">
+                  {errorDetail.value}
+                </pre>
+              )}
+            </div>
+          ),
+          actions: () => (
+            <>
+              <Button onClick={copy}>{t('error.copy')}</Button>
+              <Button onClick={report}>{t('error.report')}</Button>
+            </>
+          ),
+        }}
+      </Modal>
+    )
+  },
+})

ChuChartManager/Front/src/locales/en.yaml

@@ -123,6 +123,13 @@ common:
   import: Import
   loading: Loading...
   error: Error
+error:
+  title: An error occurred
+  detail: Error details
+  copy: Copy
+  copied: Copied to clipboard
+  copyFailed: Copy failed
+  report: Report on GitHub
 music:
   sortById: ID
   sortByName: Name

ChuChartManager/Front/src/locales/ja.yaml

@@ -123,6 +123,13 @@ common:
   import: インポート
   loading: 読み込み中…
   error: エラー
+error:
+  title: エラーが発生しました
+  detail: エラー詳細
+  copy: コピー
+  copied: クリップボードにコピーしました
+  copyFailed: コピーに失敗しました
+  report: GitHub に報告
 music:
   sortById: ID
   sortByName: 名前

ChuChartManager/Front/src/locales/zh.yaml

@@ -123,6 +123,13 @@ common:
   import: 导入
   loading: 加载中…
   error: 错误
+error:
+  title: 发生错误
+  detail: 错误详情
+  copy: 复制
+  copied: 已复制到剪贴板
+  copyFailed: 复制失败
+  report: 反馈到 GitHub
 music:
   sortById: ID
   sortByName: 名称

ChuChartManager/Front/src/main.ts

@@ -7,10 +7,13 @@ import App from './App.vue'
 import './global.sass'
 import { initThemeDefaults, selectedThemeName, UIThemes } from '@munet/ui'
 import i18n from '@/locales'
+import { globalCapture } from '@/utils/globalCapture'
 
 initThemeDefaults({ hue: 353 })
 selectedThemeName.value = UIThemes.DynamicLight
 
+window.addEventListener('unhandledrejection', e => globalCapture(e.reason, 'Unhandled rejection'))
+
 if ((window as any).chrome?.webview) {
   (window as any).chrome.webview.addEventListener('message', (e: any) => {
     ;(globalThis as any).backendUrl = e.data
@@ -20,6 +23,8 @@ if ((window as any).chrome?.webview) {
   })
 }
 
-createApp(App)
+const app = createApp(App)
+app.config.errorHandler = err => globalCapture(err, 'Vue error')
+app
   .use(i18n)
   .mount('#app')

ChuChartManager/Front/src/utils/globalCapture.ts

@@ -0,0 +1,39 @@
+import { ref } from 'vue'
+
+export const errorDialogShow = ref(false)
+export const errorMessage = ref('')
+export const errorDetail = ref('')
+
+function extract(error: any): { message: string; detail: string } {
+  const resp = error?.response
+  if (resp) {
+    const data = resp.data
+    let msg = ''
+    if (typeof data === 'string') msg = data
+    else if (data?.title) msg = data.title
+    else if (data?.error) msg = data.error
+    else if (data?.detail) msg = data.detail
+
+    const method = error.config?.method ? String(error.config.method).toUpperCase() : ''
+    const detail = [
+      `${method} ${error.config?.url ?? ''}`.trim(),
+      `HTTP ${resp.status}`,
+      typeof data === 'object' ? JSON.stringify(data, null, 2) : String(data ?? ''),
+    ].filter(Boolean).join('\n')
+    return { message: msg || `HTTP ${resp.status}`, detail }
+  }
+
+  if (error instanceof Error) {
+    return { message: error.message, detail: error.stack ?? error.message }
+  }
+
+  return { message: String(error), detail: String(error) }
+}
+
+export function globalCapture(error: any, context?: string) {
+  console.error('[globalCapture]', context ?? '', error)
+  const { message, detail } = extract(error)
+  errorMessage.value = context ? `${context}: ${message}` : message
+  errorDetail.value = detail
+  errorDialogShow.value = true
+}