vue_zhongyou 1.0.1 → 1.0.3

package//345/212/237/350/203/275/344/273/243/347/240/201//345/255/230/345/220/216/347/253/257/347/211/210/347/233/221/346/216/247/errorMonitor.js

@@ -0,0 +1,375 @@
+/**
+ * 错误监控工具
+ * 用于收集接口错误和前端页面错误，发送到后端服务器
+ */
+
+import axios from 'axios'
+
+class ErrorMonitor {
+  constructor() {
+    // 错误日志发送到后端的接口地址，可以通过环境变量配置
+    this.apiUrl = import.meta.env.VITE_ERROR_LOG_API || '/api/error-logs'
+    // 是否启用错误监控
+    this.enabled = true
+    // 发送失败的日志队列（用于重试）
+    this.failedLogs = []
+    // 最大重试次数
+    this.maxRetries = 3
+    // 创建独立的 axios 实例用于发送错误日志，避免循环依赖
+    this.httpClient = axios.create({
+      baseURL: import.meta.env.VITE_API_BASE_URL || '',
+      timeout: 5000,
+      headers: {
+        'Content-Type': 'application/json;charset=UTF-8'
+      }
+    })
+  }
+
+  /**
+   * 记录接口错误
+   * @param {Object} errorInfo - 错误信息
+   */
+  logApiError(errorInfo) {
+    const log = {
+      id: this.generateId(),
+      type: 'api', // 错误类型：接口错误
+      timestamp: new Date().toISOString(),
+      time: new Date().toLocaleString('zh-CN'),
+      url: errorInfo.url || '',
+      method: errorInfo.method || 'GET',
+      params: errorInfo.params || {},
+      data: errorInfo.data || {},
+      status: errorInfo.status || 0,
+      statusText: errorInfo.statusText || '',
+      message: errorInfo.message || '',
+      stack: errorInfo.stack || '',
+      userAgent: navigator.userAgent,
+      pageUrl: window.location.href,
+      ...errorInfo
+    }
+    
+    this.addLog(log)
+    this.consoleError('接口错误', log)
+  }
+
+  /**
+   * 记录前端页面错误
+   * @param {Object} errorInfo - 错误信息
+   */
+  logPageError(errorInfo) {
+    const log = {
+      id: this.generateId(),
+      type: 'page', // 错误类型：页面错误
+      timestamp: new Date().toISOString(),
+      time: new Date().toLocaleString('zh-CN'),
+      message: errorInfo.message || '',
+      stack: errorInfo.stack || '',
+      fileName: errorInfo.fileName || '',
+      lineNumber: errorInfo.lineNumber || 0,
+      columnNumber: errorInfo.columnNumber || 0,
+      componentName: errorInfo.componentName || '',
+      props: errorInfo.props || {},
+      userAgent: navigator.userAgent,
+      pageUrl: window.location.href,
+      ...errorInfo
+    }
+    
+    this.addLog(log)
+    this.consoleError('页面错误', log)
+  }
+
+  /**
+   * 记录Promise未捕获错误
+   * @param {Object} errorInfo - 错误信息
+   */
+  logPromiseError(errorInfo) {
+    const log = {
+      id: this.generateId(),
+      type: 'promise', // 错误类型：Promise错误
+      timestamp: new Date().toISOString(),
+      time: new Date().toLocaleString('zh-CN'),
+      message: errorInfo.message || '',
+      stack: errorInfo.stack || '',
+      reason: errorInfo.reason || '',
+      userAgent: navigator.userAgent,
+      pageUrl: window.location.href,
+      ...errorInfo
+    }
+    
+    this.addLog(log)
+    this.consoleError('Promise错误', log)
+  }
+
+  /**
+   * 添加日志（直接发送到后端，不存储在前端）
+   * @param {Object} log - 日志对象
+   */
+  addLog(log) {
+    // 如果错误监控未启用，直接返回
+    if (!this.enabled) {
+      return
+    }
+
+    // 控制台输出错误（开发环境）
+    this.consoleError(log.type === 'api' ? '接口错误' : log.type === 'page' ? '页面错误' : 'Promise错误', log)
+
+    // 直接发送到服务器
+    this.sendToServer(log).catch(error => {
+      // 如果发送失败，加入失败队列等待重试
+      console.error('发送错误日志到服务器失败:', error)
+      this.failedLogs.push({
+        log,
+        retries: 0
+      })
+      // 尝试重试
+      this.retryFailedLogs()
+    })
+  }
+
+  /**
+   * 控制台输出错误（开发环境）
+   */
+  consoleError(title, log) {
+    if (import.meta.env.DEV) {
+      console.group(`[错误监控] ${title}`)
+      console.error(log)
+      console.groupEnd()
+    }
+  }
+
+  /**
+   * 生成唯一ID
+   */
+  generateId() {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+  }
+
+  /**
+   * 从后端获取所有日志（需要后端接口支持）
+   */
+  async getLogs(type = null, params = {}) {
+    try {
+      const response = await this.httpClient.get(this.apiUrl, {
+        params: {
+          type,
+          ...params
+        }
+      })
+      return response?.data?.data || response?.data || response || []
+    } catch (error) {
+      console.error('获取错误日志失败:', error)
+      return []
+    }
+  }
+
+  /**
+   * 获取接口错误日志
+   */
+  async getApiLogs(params = {}) {
+    return this.getLogs('api', params)
+  }
+
+  /**
+   * 获取页面错误日志
+   */
+  async getPageLogs(params = {}) {
+    return this.getLogs('page', params)
+  }
+
+  /**
+   * 获取Promise错误日志
+   */
+  async getPromiseLogs(params = {}) {
+    return this.getLogs('promise', params)
+  }
+
+  /**
+   * 导出日志为JSON（从后端获取）
+   */
+  async exportLogs() {
+    try {
+      const logs = await this.getLogs()
+      const dataStr = JSON.stringify(logs, null, 2)
+      const dataBlob = new Blob([dataStr], { type: 'application/json' })
+      const url = URL.createObjectURL(dataBlob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `error-logs-${new Date().toISOString().split('T')[0]}.json`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+    } catch (error) {
+      console.error('导出日志失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 导出日志为文本（从后端获取）
+   */
+  async exportLogsAsText() {
+    try {
+      const logs = await this.getLogs()
+      let text = '错误日志导出\n'
+      text += `导出时间: ${new Date().toLocaleString('zh-CN')}\n`
+      text += `总计: ${logs.length} 条\n\n`
+      text += '='.repeat(80) + '\n\n'
+
+      logs.reverse().forEach((log, index) => {
+        text += `[${index + 1}] ${log.type.toUpperCase()} 错误\n`
+        text += `时间: ${log.time}\n`
+        text += `页面: ${log.pageUrl}\n`
+        
+        if (log.type === 'api') {
+          text += `接口: ${log.method} ${log.url}\n`
+          text += `状态: ${log.status} ${log.statusText}\n`
+          if (log.params && Object.keys(log.params).length > 0) {
+            text += `参数: ${JSON.stringify(log.params, null, 2)}\n`
+          }
+        } else {
+          if (log.fileName) {
+            text += `文件: ${log.fileName}:${log.lineNumber}:${log.columnNumber}\n`
+          }
+          if (log.componentName) {
+            text += `组件: ${log.componentName}\n`
+          }
+        }
+        
+        text += `错误信息: ${log.message}\n`
+        if (log.stack) {
+          text += `堆栈信息:\n${log.stack}\n`
+        }
+        text += '\n' + '-'.repeat(80) + '\n\n'
+      })
+
+      const dataBlob = new Blob([text], { type: 'text/plain;charset=utf-8' })
+      const url = URL.createObjectURL(dataBlob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `error-logs-${new Date().toISOString().split('T')[0]}.txt`
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      URL.revokeObjectURL(url)
+    } catch (error) {
+      console.error('导出日志失败:', error)
+      throw error
+    }
+  }
+
+  /**
+   * 发送日志到服务器
+   * @param {Object} log - 日志对象
+   */
+  async sendToServer(log) {
+    try {
+      // 使用独立的 httpClient 发送错误日志到后端，避免循环依赖
+      await this.httpClient.post(this.apiUrl, log)
+      return true
+    } catch (error) {
+      // 如果发送失败，不记录错误（避免循环记录）
+      // 但会在 addLog 中加入失败队列
+      throw error
+    }
+  }
+
+  /**
+   * 重试发送失败的日志
+   */
+  async retryFailedLogs() {
+    if (this.failedLogs.length === 0) {
+      return
+    }
+
+    // 延迟重试，避免频繁请求
+    if (this.retryTimer) {
+      return
+    }
+
+    this.retryTimer = setTimeout(async () => {
+      this.retryTimer = null
+      const logsToRetry = [...this.failedLogs]
+      this.failedLogs = []
+
+      for (const item of logsToRetry) {
+        if (item.retries >= this.maxRetries) {
+          // 超过最大重试次数，放弃
+          console.error('错误日志发送失败，已超过最大重试次数:', item.log)
+          continue
+        }
+
+        try {
+          await this.sendToServer(item.log)
+          // 发送成功，不再处理
+        } catch (error) {
+          // 发送失败，增加重试次数并重新加入队列
+          item.retries++
+          this.failedLogs.push(item)
+        }
+      }
+
+      // 如果还有失败的日志，继续重试
+      if (this.failedLogs.length > 0) {
+        setTimeout(() => this.retryFailedLogs(), 10000) // 10秒后重试
+      }
+    }, 2000) // 2秒后开始重试
+  }
+
+  /**
+   * 获取错误统计信息（从后端获取）
+   */
+  async getStatistics() {
+    try {
+      const response = await this.httpClient.get(`${this.apiUrl}/statistics`)
+      return response?.data?.data || response?.data || response || {
+        total: 0,
+        api: 0,
+        page: 0,
+        promise: 0,
+        today: 0,
+        thisWeek: 0,
+        thisMonth: 0
+      }
+    } catch (error) {
+      console.error('获取错误统计失败:', error)
+      // 返回默认统计信息
+      return {
+        total: 0,
+        api: 0,
+        page: 0,
+        promise: 0,
+        today: 0,
+        thisWeek: 0,
+        thisMonth: 0
+      }
+    }
+  }
+
+  /**
+   * 启用/禁用错误监控
+   * @param {Boolean} enabled - 是否启用
+   */
+  setEnabled(enabled) {
+    this.enabled = enabled
+  }
+
+  /**
+   * 清空日志（请求后端接口）
+   */
+  async clearLogs() {
+    try {
+      await this.httpClient.delete(this.apiUrl)
+      return true
+    } catch (error) {
+      console.error('清空错误日志失败:', error)
+      throw error
+    }
+  }
+}
+
+// 创建单例
+const errorMonitor = new ErrorMonitor()
+
+export default errorMonitor
+