chore: 前端统一错误处理

clansty · clansty · commit ac0a2586c3ce · 2024-09-03T13:26:31.000+08:00
diff --git a/MaiChartManager/Front/src/App.tsx b/MaiChartManager/Front/src/App.tsx
@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import { dateZhCN, NConfigProvider, NDialogProvider, NMessageProvider, NNotificationProvider, zhCN } from 'naive-ui';
 import { RouterView } from 'vue-router';
+import FeedbackErrorDialog from "@/components/FeedbackErrorDialog";
 
 export default defineComponent({
   render() {
@@ -10,6 +11,7 @@ export default defineComponent({
           <NDialogProvider>
             <NMessageProvider>
               <RouterView/>
+              <FeedbackErrorDialog/>
             </NMessageProvider>
           </NDialogProvider>
         </NNotificationProvider>
diff --git a/MaiChartManager/Front/src/client/api.ts b/MaiChartManager/Front/src/client/api.ts
@@ -4,6 +4,6 @@ export default (new Api({
   baseApiParams: {
     headers: {
       accept: 'application/json',
-    }
-  }
+    },
+  },
 })).maiChartManagerServlet
diff --git a/MaiChartManager/Front/src/components/FeedbackErrorDialog.tsx b/MaiChartManager/Front/src/components/FeedbackErrorDialog.tsx
@@ -0,0 +1,57 @@
+import { computed, defineComponent, ref, watch } from "vue";
+import { NButton, NFlex, NFormItem, NInput, NModal, useMessage } from "naive-ui";
+import { error, errorContext, errorId } from "@/store/refs";
+import { captureFeedback } from "@sentry/vue";
+
+export default defineComponent({
+  setup(props) {
+    const nMessage = useMessage();
+
+    const message = computed(() => {
+      if (!error.value) return "";
+      if (error.value.error) {
+        return error.value.error.message || error.value.error.toString();
+      }
+      if (error.value.message) {
+        return error.value.message;
+      }
+      return error.value.toString();
+    })
+
+    const userInput = ref("");
+
+    watch(() => error.value, (v, old) => {
+      // 防止输入到一半出另一个错误清空输入
+      if (old) return;
+      userInput.value = "";
+    });
+
+    const report = () => {
+      captureFeedback({
+        associatedEventId: errorId.value,
+        message: userInput.value || "无",
+      })
+      nMessage.success("感谢大佬的反馈！");
+      error.value = null;
+    }
+
+    return () => <NModal
+      preset="card"
+      class="w-[min(50vw,60em)]"
+      title="出错了！"
+      show={!!error.value}
+      onUpdateShow={() => error.value = null}
+    >
+      {{
+        default: () => <NFlex vertical size="large">
+          <div class="text-lg">{errorContext.value}</div>
+          {message.value}
+          <NInput v-model:value={userInput.value} class="w-full" type="textarea" placeholder="可以提供一下相关背景和上下文吗？比如说你的游戏或者乐曲有没有什么特别之处"/>
+        </NFlex>,
+        footer: () => <NFlex justify="end">
+          <NButton onClick={report}>发送反馈</NButton>
+        </NFlex>
+      }}
+    </NModal>;
+  }
+})
diff --git a/MaiChartManager/Front/src/components/ImportChartButton/index.tsx b/MaiChartManager/Front/src/components/ImportChartButton/index.tsx
@@ -4,10 +4,11 @@ import SelectFileTypeTip from "@/components/ImportChartButton/SelectFileTypeTip"
 import { ImportChartMessage, MessageLevel } from "@/client/apiGen";
 import CheckingModal from "@/components/ImportChartButton/CheckingModal";
 import api from "@/client/api";
-import { musicList, selectMusicId, updateMusicList } from "@/store/refs";
+import { globalCapture, musicList, selectMusicId, updateMusicList } from "@/store/refs";
 import ErrorDisplayIdInput from "@/components/ImportChartButton/ErrorDisplayIdInput";
 import ImportStepDisplay from "@/components/ImportChartButton/ImportStepDisplay";
 import { useStorage } from "@vueuse/core";
+import { captureException } from "@sentry/vue";
 
 enum STEP {
   none,
@@ -151,6 +152,12 @@ export default defineComponent({
         music.importStep = IMPORT_STEP.finish;
       } catch (e: any) {
         console.log(music, e)
+        captureException(e.error || e, {
+          tags: {
+            context: '导入乐曲出错',
+            step: music.importStep,
+          }
+        })
         errors.value.push({level: MessageLevel.Fatal, message: e.error?.message || e.message || e.toString(), name: music.name});
         try {
           await api.DeleteMusic(music.id);
@@ -217,10 +224,7 @@ export default defineComponent({
       } catch (e: any) {
         if (e.name === 'AbortError') return
         console.log(e)
-        dialog.error({
-          title: '错误',
-          content: e.message,
-        })
+        globalCapture(e, "导入乐曲出错（全局）")
       } finally {
         if (step.value !== STEP.showResultError)
           step.value = STEP.none
diff --git a/MaiChartManager/Front/src/components/ModManager/ConfigEditor.tsx b/MaiChartManager/Front/src/components/ModManager/ConfigEditor.tsx
@@ -5,6 +5,7 @@ import comments from './modComments.yaml';
 import api from "@/client/api";
 import { capitalCase } from "change-case";
 import ProblemsDisplay from "@/components/ProblemsDisplay";
+import { globalCapture } from "@/store/refs";
 
 export default defineComponent({
   props: {
@@ -40,7 +41,7 @@ export default defineComponent({
         await api.InstallMelonLoader()
         await props.refresh()
       } catch (e: any) {
-        dialog.error({title: '安装失败', content: e.toString()})
+        globalCapture(e, "安装 MelonLoader 失败")
       } finally {
         installingMelonLoader.value = false
       }
@@ -56,7 +57,7 @@ export default defineComponent({
         showAquaMaiInstallDone.value = true
         setTimeout(() => showAquaMaiInstallDone.value = false, 3000);
       } catch (e: any) {
-        dialog.error({title: '安装失败', content: e.toString()})
+        globalCapture(e, "安装 AquaMai 失败")
       } finally {
         installingAquaMai.value = false
       }
diff --git a/MaiChartManager/Front/src/components/MusicEdit/AcbAwb.tsx b/MaiChartManager/Front/src/components/MusicEdit/AcbAwb.tsx
@@ -2,7 +2,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 import { HttpResponse, MusicXmlWithABJacket } from "@/client/apiGen";
 import { NButton, NDrawer, NDrawerContent, NFlex, NForm, NFormItem, NInputNumber, NModal, NRadio, useDialog } from "naive-ui";
 import noJacket from "@/assets/noJacket.webp";
-import { selectedADir } from "@/store/refs";
+import { globalCapture, selectedADir } from "@/store/refs";
 import FileTypeIcon from "@/components/FileTypeIcon";
 import stdIcon from "@/assets/stdIcon.png";
 import dxIcon from "@/assets/dxIcon.png";
@@ -84,10 +84,7 @@ export default defineComponent({
       } catch (e: any) {
         if (e.name === 'AbortError') return
         console.log(e)
-        dialog.error({
-          title: '错误',
-          content: e.message,
-        })
+        globalCapture(e, "导入音频出错")
       } finally {
         tipShow.value = false;
         tipSelectAwbShow.value = false;
diff --git a/MaiChartManager/Front/src/components/MusicEdit/JacketBox.tsx b/MaiChartManager/Front/src/components/MusicEdit/JacketBox.tsx
@@ -2,7 +2,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 import noJacket from "@/assets/noJacket.webp";
 import api from "@/client/api";
 import { useDialog } from "naive-ui";
-import { selectedMusicBrief } from "@/store/refs";
+import { globalCapture, selectedMusicBrief } from "@/store/refs";
 import { MusicXmlWithABJacket } from "@/client/apiGen";
 
 export default defineComponent({
@@ -52,10 +52,7 @@ export default defineComponent({
       } catch (e: any) {
         if (e.name === 'AbortError') return
         console.log(e)
-        dialog.error({
-          title: '错误',
-          content: e.message,
-        })
+        globalCapture(e, "替换图片失败")
       }
     }
 
diff --git a/MaiChartManager/Front/src/components/MusicEdit/index.tsx b/MaiChartManager/Front/src/components/MusicEdit/index.tsx
@@ -1,6 +1,6 @@
 import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
 import { Chart, GenreXml, MusicXmlWithABJacket } from "@/client/apiGen";
-import { addVersionList, genreList, selectedADir, selectedMusicBrief, selectMusicId, updateAddVersionList, updateGenreList, updateMusicList } from "@/store/refs";
+import { addVersionList, genreList, globalCapture, selectedADir, selectedMusicBrief, selectMusicId, updateAddVersionList, updateGenreList, updateMusicList } from "@/store/refs";
 import api from "@/client/api";
 import { NButton, NFlex, NForm, NFormItem, NInput, NInputNumber, NSelect, NTabPane, NTabs, SelectOption, useDialog, useMessage } from "naive-ui";
 import JacketBox from "./JacketBox";
@@ -35,8 +35,7 @@ const Component = defineComponent({
           selectedLevel.value = firstEnabledChart;
         }
       } catch (e: any) {
-        message.error('加载歌曲信息失败');
-        captureException(e.error || e);
+        globalCapture(e, "获取乐曲详情失败")
       }
 
       watch(() => info.value?.name, sync('name', api.EditMusicName));
diff --git a/MaiChartManager/Front/src/plugins/sentry.ts b/MaiChartManager/Front/src/plugins/sentry.ts
@@ -15,7 +15,7 @@ export default {
       // Tracing
       tracesSampleRate: 1.0, //  Capture 100% of the transactions
       // Session Replay
-      replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+      replaysSessionSampleRate: 0.5, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
       replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
       // Profiling
       profilesSampleRate: 1.0, // Profile 100% of the transactions. This value is relative to tracesSampleRate
diff --git a/MaiChartManager/Front/src/store/refs.ts b/MaiChartManager/Front/src/store/refs.ts
@@ -1,6 +1,21 @@
 import { computed, ref } from "vue";
 import { AppVersionResult, GenreXml, MusicBrief, VersionXml } from "@/client/apiGen";
 import api from "@/client/api";
+import { captureException } from "@sentry/vue";
+
+export const error = ref();
+export const errorId = ref<string>();
+export const errorContext = ref<string>();
+
+export const globalCapture = (err: any, context: string) => {
+  error.value = err;
+  errorContext.value = context;
+  errorId.value = captureException(err.error || err, {
+    tags: {
+      context
+    }
+  })
+}
 
 export const selectMusicId = ref(0)
 export const genreList = ref<GenreXml[]>([]);
diff --git a/MaiChartManager/Front/src/views/Index.tsx b/MaiChartManager/Front/src/views/Index.tsx
@@ -2,30 +2,41 @@ import { defineComponent, onMounted } from 'vue';
 import { NFlex, NScrollbar, useNotification } from "naive-ui";
 import MusicList from "@/components/MusicList";
 import GenreVersionManager from "@/components/GenreVersionManager";
-import { selectedADir, updateAddVersionList, updateAssetDirs, updateGenreList, updateSelectedAssetDir, updateVersion } from "@/store/refs";
+import { globalCapture, selectedADir, updateAddVersionList, updateAssetDirs, updateGenreList, updateSelectedAssetDir, updateVersion } from "@/store/refs";
 import MusicEdit from "@/components/MusicEdit";
 import MusicSelectedTopRightToolbar from "@/components/MusicSelectedTopRightToolbar";
 import CreateMusicButton from "@/components/CreateMusicButton";
 import ImportChartButton from "@/components/ImportChartButton";
 import ModManager from "@/components/ModManager";
 import VersionInfo from "@/components/VersionInfo";
+import { captureException } from "@sentry/vue";
 
 export default defineComponent({
   setup() {
-    onMounted(updateGenreList)
-    onMounted(updateAddVersionList)
-    onMounted(updateSelectedAssetDir)
-    onMounted(updateAssetDirs)
-    onMounted(updateVersion)
-
     const notification = useNotification();
 
-    onMounted(() => {
+    onMounted(async () => {
       addEventListener("unhandledrejection", (event) => {
         console.log(event)
+        captureException(event.reason?.error || event.reason, {
+          tags: {
+            context: 'unhandledrejection'
+          }
+        })
         if (import.meta.env.DEV)
           notification.error({title: '未处理错误', content: event.reason?.error?.message || event.reason?.message});
       });
+      try {
+        await Promise.all([
+          updateGenreList(),
+          updateAddVersionList(),
+          updateSelectedAssetDir(),
+          updateAssetDirs(),
+          updateVersion()
+        ])
+      } catch (err) {
+        globalCapture(err, "初始化失败")
+      }
     })
   },
   render() {
