Refactor code structure for improved readability and maintainability

src/components/settings/AboutCard.vue

@@ -190,6 +190,18 @@
                     <v-btn size="small" variant="text" prepend-icon="mdi-open-in-new" @click="goToDebug">查看 /debug 页面</v-btn>
                   </div>
                   <v-alert v-if="copyOk" type="success" density="compact" class="mb-4">已复制到剪贴板</v-alert>
+                  <div class="d-flex gap-2 mb-4">
+                    <v-btn
+                      size="small"
+                      color="primary"
+                      variant="elevated"
+                      prepend-icon="mdi-message-alert"
+                      @click="openFeedback"
+                      block
+                    >
+                      发送错误反馈到 Sentry
+                    </v-btn>
+                  </div>
                   <h4 class="text-subtitle-1 mb-2">反馈渠道</h4>
                   <v-list lines="one" class="bg-transparent">
                     <v-list-item :href="qqGroupLink" target="_blank" prepend-icon="mdi-qqchat">
@@ -357,6 +369,15 @@ export default {
       return `mailto:sun@wuyuan.dev?subject=${subject}&body=${body}`;
     });
 
+    const openFeedback = () => {
+      // 打开反馈对话框
+      if (typeof window.openSentryFeedback === 'function') {
+        window.openSentryFeedback();
+      } else {
+        console.warn('Sentry Feedback 功能不可用');
+      }
+    };
+
     onMounted(() => {
       loadDependencies();
     });
@@ -374,6 +395,7 @@ export default {
       reloadVisitorId,
       openReportDialog,
       copyEnvInfo,
+      openFeedback,
       envBoxText,
       envInfo,
       reportBody,

src/main.js

@@ -28,6 +28,10 @@ import * as Sentry from "@sentry/vue";
 
 const app = createApp(App)
 
+// 保存 feedback integration 实例的引用
+let feedbackIntegration = null;
+
+// 初始化 Sentry，但暂不启用 Replay
 Sentry.init({
   app,
   dsn: "https://2f8e5e4ec986c6077d3798ba9f683fdd@o4510762489151488.ingest.us.sentry.io/4510762503438336",
@@ -36,19 +40,122 @@ Sentry.init({
   sendDefaultPii: true,
   integrations: [
     Sentry.browserTracingIntegration({ router }),
-    Sentry.replayIntegration()
+    Sentry.replayIntegration({
+      // 默认不自动录制，只在手动触发或发生错误时录制
+      maskAllText: false,
+      blockAllMedia: false,
+    }),
+    feedbackIntegration = Sentry.feedbackIntegration({
+      // 自动注入反馈按钮，但我们会手动触发
+      autoInject: false,
+      colorScheme: 'system',
+      showBranding: false,
+      showName: true,
+      showEmail: true,
+      isNameRequired: false,
+      isEmailRequired: false,
+      useSentryUser: {
+        name: 'username',
+        email: 'email',
+      },
+      themeDark: {
+        submitBackground: '#6200EA',
+        submitBackgroundHover: '#7C4DFF',
+      },
+      themeLight: {
+        submitBackground: '#6200EA',
+        submitBackgroundHover: '#7C4DFF',
+      },
+    })
   ],
   // Tracing
   tracesSampleRate: 1.0, // Capture 100% of the transactions
   // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
   tracePropagationTargets: ["localhost", /^https:\/\/kv-service\.(houlang\.cloud|wuyuan\.dev)/],
-  // Session Replay
-  replaysSessionSampleRate: 0.01, // 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.
+  // Session Replay - 关闭自动录制
+  replaysSessionSampleRate: 0, // 不自动录制会话
+  replaysOnErrorSampleRate: 0, // 不在错误时自动录制（改为手动触发）
   // Logs
-  enableLogs: true
+  enableLogs: true,
+  // 在初始化时设置用户识别的钩子
+  beforeSend(event) {
+    return event;
+  }
 });
 
+// 异步设置用户 fingerprint
+getVisitorId().then(visitorId => {
+  Sentry.setUser({
+    id: visitorId,
+    username: visitorId,
+  });
+  Sentry.setTag('fingerprint', visitorId);
+  console.log('Sentry 用户标识已设置:', visitorId);
+}).catch(error => {
+  console.warn('设置 Sentry 用户标识失败:', error);
+});
+
+// 导出用于手动打开反馈表单的函数
+window.openSentryFeedback = () => {
+  try {
+    if (!feedbackIntegration) {
+      console.warn('Sentry Feedback integration 未初始化');
+      return false;
+    }
+
+    if (typeof feedbackIntegration.createWidget === 'function') {
+      const widget = feedbackIntegration.createWidget();
+      if (widget && typeof widget.open === 'function') {
+        widget.open();
+        console.log('Sentry Feedback 对话框已打开');
+        return true;
+      }
+    }
+
+    if (typeof feedbackIntegration.openDialog === 'function') {
+      feedbackIntegration.openDialog();
+      console.log('Sentry Feedback 对话框已打开');
+      return true;
+    }
+
+    console.warn('无法找到打开 Feedback 的方法');
+    console.log('可用方法:', Object.keys(feedbackIntegration));
+    return false;
+  } catch (error) {
+    console.error('打开 Sentry Feedback 时出错:', error);
+    return false;
+  }
+};
+
+// 导出用于手动启动录制的函数
+window.startSentryReplay = () => {
+  try {
+    const client = Sentry.getClient();
+    if (!client) {
+      console.warn('Sentry 客户端未初始化');
+      return false;
+    }
+
+    // 获取 Replay integration 实例
+    const integrations = client.getOptions().integrations || [];
+    const replayIntegration = integrations.find(
+      integration => integration && integration.name === 'Replay'
+    );
+
+    if (replayIntegration && typeof replayIntegration.start === 'function') {
+      replayIntegration.start();
+      console.log('Sentry Replay 已手动启动');
+      return true;
+    }
+
+    console.warn('无法找到 Sentry Replay integration');
+    return false;
+  } catch (error) {
+    console.error('启动 Sentry Replay 时出错:', error);
+    return false;
+  }
+};
+
 registerPlugins(app)
 //app.use(TDesign)
 app.use(messageService);