vue_zhongyou 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "index.js",
   "keywords": [],

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/errorLogPage.vue

@@ -0,0 +1,422 @@
+<template>
+  <div class="error-log-page">
+    <!-- 顶部统计卡片 -->
+    <div class="stats-section">
+      <div class="stat-card" v-for="(value, key) in statistics" :key="key">
+        <div class="stat-label">{{ getStatLabel(key) }}</div>
+        <div class="stat-value">{{ value }}</div>
+      </div>
+    </div>
+
+    <!-- 筛选和操作栏 -->
+    <div class="toolbar">
+      <van-radio-group v-model="filterType" direction="horizontal" @change="handleFilterChange">
+        <van-radio name="">全部</van-radio>
+        <van-radio name="api">接口</van-radio>
+        <van-radio name="page">页面</van-radio>
+        <van-radio name="promise">Promise</van-radio>
+      </van-radio-group>
+      <div class="actions">
+        <van-button size="small" type="danger" plain @click="handleClear">清空</van-button>
+        <van-button size="small" type="primary" @click="handleExportJSON">导出JSON</van-button>
+        <van-button size="small" type="primary" @click="handleExportText">导出TXT</van-button>
+      </div>
+    </div>
+
+    <!-- 日志列表 -->
+    <div class="logs-container">
+      <van-empty v-if="filteredLogs.length === 0" description="暂无错误日志" />
+      <div v-else class="logs-list">
+        <div
+          v-for="log in filteredLogs"
+          :key="log.id"
+          class="log-item"
+          :class="`log-${log.type}`"
+          @click="toggleLogDetail(log)"
+        >
+          <div class="log-header">
+            <div class="log-type-badge" :class="`badge-${log.type}`">
+              {{ getTypeLabel(log.type) }}
+            </div>
+            <div class="log-time">{{ log.time }}</div>
+          </div>
+          <div class="log-message">{{ log.message || '无错误信息' }}</div>
+          <div v-if="log.type === 'api'" class="log-api-info">
+            <span class="method">{{ log.method }}</span>
+            <span class="url">{{ log.url }}</span>
+            <span v-if="log.status" class="status" :class="getStatusClass(log.status)">
+              {{ log.status }} {{ log.statusText }}
+            </span>
+          </div>
+          <div v-if="expandedLogs[log.id]" class="log-detail">
+            <div class="detail-row">
+              <span class="detail-label">页面URL:</span>
+              <span class="detail-value">{{ log.pageUrl }}</span>
+            </div>
+            <div v-if="log.type === 'api'" class="detail-row">
+              <span class="detail-label">请求方法:</span>
+              <span class="detail-value">{{ log.method }}</span>
+            </div>
+            <div v-if="log.type === 'api'" class="detail-row">
+              <span class="detail-label">请求URL:</span>
+              <span class="detail-value">{{ log.url }}</span>
+            </div>
+            <div v-if="log.type === 'api' && Object.keys(log.params || {}).length > 0" class="detail-row">
+              <span class="detail-label">请求参数:</span>
+              <pre class="detail-value">{{ JSON.stringify(log.params, null, 2) }}</pre>
+            </div>
+            <div v-if="log.fileName" class="detail-row">
+              <span class="detail-label">文件:</span>
+              <span class="detail-value">{{ log.fileName }}:{{ log.lineNumber }}:{{ log.columnNumber }}</span>
+            </div>
+            <div v-if="log.componentName" class="detail-row">
+              <span class="detail-label">组件:</span>
+              <span class="detail-value">{{ log.componentName }}</span>
+            </div>
+            <div v-if="log.stack" class="detail-row">
+              <span class="detail-label">堆栈信息:</span>
+              <pre class="detail-value stack">{{ log.stack }}</pre>
+            </div>
+            <div class="detail-row">
+              <span class="detail-label">用户代理:</span>
+              <span class="detail-value small">{{ log.userAgent }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { showConfirmDialog, showToast, showSuccessToast, showFailToast } from 'vant'
+import errorMonitor from '@/utils/errorMonitor'
+
+const filterType = ref('')
+const expandedLogs = ref({})
+const statistics = ref({
+  total: 0,
+  api: 0,
+  page: 0,
+  promise: 0,
+  today: 0,
+  thisWeek: 0,
+  thisMonth: 0
+})
+
+const allLogs = ref([])
+const filteredLogs = computed(() => {
+  if (!filterType.value) {
+    return allLogs.value
+  }
+  return allLogs.value.filter(log => log.type === filterType.value)
+})
+
+// 获取统计标签
+const getStatLabel = (key) => {
+  const labels = {
+    total: '总计',
+    api: '接口错误',
+    page: '页面错误',
+    promise: 'Promise错误',
+    today: '今日',
+    thisWeek: '本周',
+    thisMonth: '本月'
+  }
+  return labels[key] || key
+}
+
+// 获取类型标签
+const getTypeLabel = (type) => {
+  const labels = {
+    api: '接口',
+    page: '页面',
+    promise: 'Promise'
+  }
+  return labels[type] || type
+}
+
+// 获取状态样式类
+const getStatusClass = (status) => {
+  if (status >= 200 && status < 300) return 'status-success'
+  if (status >= 400 && status < 500) return 'status-client-error'
+  if (status >= 500) return 'status-server-error'
+  return 'status-unknown'
+}
+
+// 切换日志详情
+const toggleLogDetail = (log) => {
+  expandedLogs.value[log.id] = !expandedLogs.value[log.id]
+}
+
+// 筛选改变
+const handleFilterChange = () => {
+  expandedLogs.value = {}
+}
+
+// 加载日志
+const loadLogs = async () => {
+  try {
+    const [logs, stats] = await Promise.all([
+      errorMonitor.getLogs(),
+      errorMonitor.getStatistics()
+    ])
+    allLogs.value = logs
+    statistics.value = stats
+  } catch (error) {
+    console.error('加载日志失败:', error)
+    showFailToast('加载日志失败')
+  }
+}
+
+// 清空日志
+const handleClear = async () => {
+  try {
+    await showConfirmDialog({
+      title: '确认清空',
+      message: '确定要清空所有错误日志吗？此操作不可恢复。'
+    })
+    await errorMonitor.clearLogs()
+    await loadLogs()
+    showSuccessToast('日志已清空')
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('清空日志失败:', error)
+      showFailToast('清空日志失败')
+    }
+  }
+}
+
+// 导出JSON
+const handleExportJSON = async () => {
+  try {
+    await errorMonitor.exportLogs()
+    showSuccessToast('导出成功')
+  } catch (error) {
+    showFailToast('导出失败')
+    console.error('导出失败:', error)
+  }
+}
+
+// 导出TXT
+const handleExportText = async () => {
+  try {
+    await errorMonitor.exportLogsAsText()
+    showSuccessToast('导出成功')
+  } catch (error) {
+    showFailToast('导出失败')
+    console.error('导出失败:', error)
+  }
+}
+
+onMounted(() => {
+  loadLogs()
+})
+</script>
+
+<style lang="scss" scoped>
+.error-log-page {
+  padding: 16px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.stats-section {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+
+  .stat-card {
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+    .stat-label {
+      font-size: 12px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+
+    .stat-value {
+      font-size: 24px;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+}
+
+.toolbar {
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+}
+
+.logs-container {
+  .logs-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .log-item {
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:active {
+      transform: scale(0.98);
+    }
+
+    .log-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .log-type-badge {
+        display: inline-block;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #fff;
+
+        &.badge-api {
+          background-color: #ff6b6b;
+        }
+
+        &.badge-page {
+          background-color: #4ecdc4;
+        }
+
+        &.badge-promise {
+          background-color: #95e1d3;
+        }
+      }
+
+      .log-time {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+
+    .log-message {
+      font-size: 14px;
+      color: #333;
+      margin-bottom: 8px;
+      word-break: break-all;
+    }
+
+    .log-api-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      font-size: 12px;
+
+      .method {
+        padding: 2px 6px;
+        background-color: #f0f0f0;
+        border-radius: 3px;
+        font-weight: 500;
+      }
+
+      .url {
+        color: #666;
+        flex: 1;
+        word-break: break-all;
+      }
+
+      .status {
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-weight: 500;
+
+        &.status-success {
+          background-color: #d4edda;
+          color: #155724;
+        }
+
+        &.status-client-error {
+          background-color: #f8d7da;
+          color: #721c24;
+        }
+
+        &.status-server-error {
+          background-color: #f5c6cb;
+          color: #721c24;
+        }
+
+        &.status-unknown {
+          background-color: #fff3cd;
+          color: #856404;
+        }
+      }
+    }
+
+    .log-detail {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #f0f0f0;
+
+      .detail-row {
+        margin-bottom: 8px;
+
+        .detail-label {
+          font-size: 12px;
+          color: #999;
+          margin-right: 8px;
+        }
+
+        .detail-value {
+          font-size: 12px;
+          color: #666;
+          word-break: break-all;
+
+          &.small {
+            font-size: 11px;
+          }
+
+          &.stack {
+            background-color: #f5f5f5;
+            padding: 8px;
+            border-radius: 4px;
+            white-space: pre-wrap;
+            font-family: monospace;
+            max-height: 200px;
+            overflow-y: auto;
+          }
+        }
+
+        pre {
+          margin: 4px 0;
+          white-space: pre-wrap;
+          font-size: 12px;
+          background-color: #f5f5f5;
+          padding: 8px;
+          border-radius: 4px;
+          overflow-x: auto;
+        }
+      }
+    }
+  }
+}
+</style>
+

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
+

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/request.js

@@ -0,0 +1,99 @@
+import axios from 'axios'
+import errorMonitor from '@/utils/errorMonitor'
+
+// 创建 axios 实例
+const request = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '', // 接口基础地址
+  timeout: 10000, // 请求超时时间
+  headers: {
+    'Content-Type': 'application/json;charset=UTF-8'
+  }
+})
+
+// 请求拦截器
+request.interceptors.request.use(
+  config => {
+    // 在发送请求之前做些什么
+    // 例如：添加token
+    // const token = localStorage.getItem('token')
+    // if (token) {
+    //   config.headers.Authorization = `Bearer ${token}`
+    // }
+    return config
+  },
+  error => {
+    // 对请求错误做些什么
+    console.error('请求错误:', error)
+    
+    // 如果请求标记了跳过错误日志，则不记录
+    if (error.config?.__skipErrorLog) {
+      return Promise.reject(error)
+    }
+    
+    // 记录接口错误
+    errorMonitor.logApiError({
+      url: error.config?.url || '',
+      method: error.config?.method?.toUpperCase() || 'GET',
+      params: error.config?.params || {},
+      data: error.config?.data || {},
+      message: error.message || '请求错误',
+      stack: error.stack || ''
+    })
+    
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+request.interceptors.response.use(
+  response => {
+    // 对响应数据做点什么
+    const { data } = response
+    
+    // 如果业务代码返回错误，也可以在这里记录
+    // 例如：if (data.code !== 200) { ... }
+    
+    return data
+  },
+  error => {
+    // 对响应错误做点什么
+    console.error('响应错误:', error)
+    
+    // 如果请求标记了跳过错误日志，则不记录（避免循环记录错误日志请求本身的错误）
+    if (error.config?.__skipErrorLog) {
+      return Promise.reject(error)
+    }
+    
+    // 记录接口错误
+    const errorInfo = {
+      url: error.config?.url || '',
+      method: error.config?.method?.toUpperCase() || 'GET',
+      params: error.config?.params || {},
+      data: error.config?.data || {},
+      message: error.message || '响应错误',
+      stack: error.stack || ''
+    }
+    
+    // 如果是HTTP错误响应
+    if (error.response) {
+      errorInfo.status = error.response.status
+      errorInfo.statusText = error.response.statusText
+      errorInfo.responseData = error.response.data
+    } else if (error.request) {
+      // 请求已发出但没有收到响应
+      errorInfo.status = 0
+      errorInfo.statusText = '网络错误或无响应'
+      errorInfo.message = '网络错误，请检查网络连接'
+    } else {
+      // 其他错误
+      errorInfo.status = 0
+      errorInfo.statusText = '请求配置错误'
+    }
+    
+    errorMonitor.logApiError(errorInfo)
+    
+    return Promise.reject(error)
+  }
+)
+
+export default request

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/testError.vue

@@ -0,0 +1,500 @@
+<template>
+  <div class="test-error-page">
+    <div class="header">
+      <h2>错误捕获测试页面</h2>
+      <van-button 
+        type="primary" 
+        size="small"
+        @click="goToLogPage"
+      >
+        查看错误日志
+      </van-button>
+    </div>
+
+    <!-- 统计信息 -->
+    <div class="stats-card">
+      <div class="stat-item">
+        <div class="stat-label">总计</div>
+        <div class="stat-value">{{ statistics.total }}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">接口错误</div>
+        <div class="stat-value">{{ statistics.api }}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">页面错误</div>
+        <div class="stat-value">{{ statistics.page }}</div>
+      </div>
+      <div class="stat-item">
+        <div class="stat-label">Promise错误</div>
+        <div class="stat-value">{{ statistics.promise }}</div>
+      </div>
+    </div>
+
+    <!-- 接口错误测试 -->
+    <div class="test-section">
+      <div class="section-title">接口错误测试</div>
+      <div class="button-group">
+        <van-button 
+          type="primary" 
+          :loading="loading"
+          @click="fetchNoticeList"
+        >
+          正常请求（返回noticeList）
+        </van-button>
+        <van-button 
+          type="danger" 
+          @click="test404Error"
+        >
+          测试404错误
+        </van-button>
+        <van-button 
+          type="danger" 
+          @click="test500Error"
+        >
+          测试500错误
+        </van-button>
+        <van-button 
+          type="warning" 
+          @click="testNetworkError"
+        >
+          测试网络错误
+        </van-button>
+        <van-button 
+          type="warning" 
+          @click="testTimeoutError"
+        >
+          测试超时错误
+        </van-button>
+      </div>
+      
+      <!-- 请求结果显示 -->
+      <div v-if="requestResult" class="result-box">
+        <div class="result-title">请求结果：</div>
+        <pre class="result-content">{{ requestResult }}</pre>
+      </div>
+    </div>
+
+    <!-- 页面错误测试 -->
+    <div class="test-section">
+      <div class="section-title">页面错误测试</div>
+      <div class="button-group">
+        <van-button 
+          type="danger" 
+          @click="testPageError"
+        >
+          测试JavaScript错误
+        </van-button>
+        <van-button 
+          type="danger" 
+          @click="testReferenceError"
+        >
+          测试引用错误
+        </van-button>
+        <van-button 
+          type="danger" 
+          @click="testTypeError"
+        >
+          测试类型错误
+        </van-button>
+      </div>
+    </div>
+
+    <!-- Promise错误测试 -->
+    <div class="test-section">
+      <div class="section-title">Promise错误测试</div>
+      <div class="button-group">
+        <van-button 
+          type="warning" 
+          @click="testPromiseError"
+        >
+          测试Promise未捕获错误
+        </van-button>
+        <van-button 
+          type="warning" 
+          @click="testAsyncError"
+        >
+          测试Async函数错误
+        </van-button>
+      </div>
+    </div>
+
+    <!-- Vue组件错误测试 -->
+    <div class="test-section">
+      <div class="section-title">Vue组件错误测试</div>
+      <div class="button-group">
+        <van-button 
+          type="danger" 
+          @click="testVueError"
+        >
+          测试Vue组件渲染错误
+        </van-button>
+      </div>
+      <!-- 用于触发Vue错误的组件 -->
+      <div v-if="shouldRenderError">
+        {{ undefinedVariable.property }}
+      </div>
+    </div>
+
+    <!-- 刷新统计按钮 -->
+    <div class="refresh-section">
+      <van-button 
+        type="default" 
+        block
+        @click="refreshStatistics"
+      >
+        刷新统计信息
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, showFailToast, showSuccessToast } from 'vant'
+import request from '@/api/request'
+import errorMonitor from '@/utils/errorMonitor'
+
+const router = useRouter()
+const loading = ref(false)
+const requestResult = ref('')
+const shouldRenderError = ref(false)
+const statistics = ref({
+  total: 0,
+  api: 0,
+  page: 0,
+  promise: 0
+})
+
+// 刷新统计信息
+const refreshStatistics = async () => {
+  try {
+    statistics.value = await errorMonitor.getStatistics()
+    showToast('统计信息已刷新')
+  } catch (error) {
+    console.error('刷新统计信息失败:', error)
+    showToast('刷新统计信息失败')
+  }
+}
+
+// 跳转到日志页面
+const goToLogPage = () => {
+  router.push('/error-log')
+}
+
+// ============ 接口错误测试 ============
+
+// 正常请求 - 获取noticeList
+const fetchNoticeList = async () => {
+  loading.value = true
+  requestResult.value = ''
+  
+  try {
+    // 模拟一个正常的接口请求
+    const response = await request.get('/api/notice/list', {
+      params: {
+        page: 1,
+        pageSize: 10
+      }
+    })
+    
+    // 如果请求成功，显示结果
+    if (response && response.data) {
+      requestResult.value = JSON.stringify(response.data, null, 2)
+      showSuccessToast('请求成功，数据已更新')
+    } else {
+      // 模拟返回的数据
+      const mockData = [
+        { id: 1, title: '通知公告1', content: '这是通知公告1的内容' },
+        { id: 2, title: '通知公告2', content: '这是通知公告2的内容' },
+        { id: 3, title: '通知公告3', content: '这是通知公告3的内容' },
+        { id: 4, title: '通知公告4', content: '这是通知公告4的内容' },
+        { id: 5, title: '通知公告5', content: '这是通知公告5的内容' }
+      ]
+      requestResult.value = JSON.stringify(mockData, null, 2)
+      showSuccessToast('使用模拟数据（接口不存在）')
+    }
+    
+    refreshStatistics()
+  } catch (error) {
+    // 错误会被错误监控自动捕获
+    requestResult.value = `错误: ${error.message || '未知错误'}`
+    showFailToast('请求失败：' + (error.message || '未知错误'))
+    refreshStatistics()
+  } finally {
+    loading.value = false
+  }
+}
+
+// 测试404错误
+const test404Error = async () => {
+  loading.value = true
+  requestResult.value = ''
+  
+  try {
+    await request.get('/api/not-found-endpoint-404')
+  } catch (error) {
+    requestResult.value = `404错误已捕获: ${error.message}`
+    showFailToast('404错误已捕获')
+    refreshStatistics()
+  } finally {
+    loading.value = false
+  }
+}
+
+// 测试500错误
+const test500Error = async () => {
+  loading.value = true
+  requestResult.value = ''
+  
+  try {
+    await request.get('/api/server-error-500')
+  } catch (error) {
+    requestResult.value = `500错误已捕获: ${error.message}`
+    showFailToast('500错误已捕获')
+    refreshStatistics()
+  } finally {
+    loading.value = false
+  }
+}
+
+// 测试网络错误
+const testNetworkError = async () => {
+  loading.value = true
+  requestResult.value = ''
+  
+  try {
+    // 临时修改baseURL来模拟网络错误
+    const originalBaseURL = request.defaults.baseURL
+    request.defaults.baseURL = 'https://non-existent-domain-12345-xyz.com'
+    
+    await request.get('/api/test-network-error')
+    
+    // 恢复baseURL
+    request.defaults.baseURL = originalBaseURL
+  } catch (error) {
+    requestResult.value = `网络错误已捕获: ${error.message}`
+    showFailToast('网络错误已捕获')
+    // 恢复baseURL
+    request.defaults.baseURL = import.meta.env.VITE_API_BASE_URL || ''
+    refreshStatistics()
+  } finally {
+    loading.value = false
+  }
+}
+
+// 测试超时错误
+const testTimeoutError = async () => {
+  loading.value = true
+  requestResult.value = ''
+  
+  try {
+    // 创建一个超时时间很短的请求
+    await request.get('/api/slow-endpoint', {
+      timeout: 100 // 100ms超时
+    })
+  } catch (error) {
+    requestResult.value = `超时错误已捕获: ${error.message}`
+    showFailToast('超时错误已捕获')
+    refreshStatistics()
+  } finally {
+    loading.value = false
+  }
+}
+
+// ============ 页面错误测试 ============
+
+// 测试JavaScript错误
+const testPageError = () => {
+  // 使用 setTimeout 确保错误不会被 try-catch 捕获
+  setTimeout(() => {
+    throw new Error('测试页面错误：这是一个模拟的前端JavaScript错误')
+  }, 0)
+  showToast('页面错误已触发，请查看控制台和日志')
+  setTimeout(() => {
+    refreshStatistics()
+  }, 100)
+}
+
+// 测试引用错误
+const testReferenceError = () => {
+  setTimeout(() => {
+    // @ts-ignore
+    undefinedVariable.someProperty // 这会触发 ReferenceError
+  }, 0)
+  showToast('引用错误已触发，请查看控制台和日志')
+  setTimeout(() => {
+    refreshStatistics()
+  }, 100)
+}
+
+// 测试类型错误
+const testTypeError = () => {
+  setTimeout(() => {
+    const obj = null
+    // @ts-ignore
+    obj.property // 这会触发 TypeError
+  }, 0)
+  showToast('类型错误已触发，请查看控制台和日志')
+  setTimeout(() => {
+    refreshStatistics()
+  }, 100)
+}
+
+// ============ Promise错误测试 ============
+
+// 测试Promise未捕获错误
+const testPromiseError = () => {
+  // 创建一个未处理的Promise错误
+  Promise.reject(new Error('测试Promise错误：这是一个未捕获的Promise错误'))
+  showToast('Promise错误已触发，请查看控制台和日志')
+  setTimeout(() => {
+    refreshStatistics()
+  }, 100)
+}
+
+// 测试Async函数错误
+const testAsyncError = async () => {
+  // 创建一个异步函数，但不捕获错误
+  const asyncFunc = async () => {
+    throw new Error('测试Async函数错误：这是一个异步函数中的未捕获错误')
+  }
+  
+  // 不等待，让它自己失败
+  asyncFunc().catch(() => {
+    // 即使这里捕获了，但如果在其他地方没有捕获，错误监控还是会捕获
+  })
+  
+  // 触发一个真正未捕获的Promise错误
+  setTimeout(() => {
+    Promise.reject(new Error('Async函数中的未捕获Promise错误'))
+  }, 0)
+  
+  showToast('Async错误已触发，请查看控制台和日志')
+  setTimeout(() => {
+    refreshStatistics()
+  }, 100)
+}
+
+// ============ Vue组件错误测试 ============
+
+// 测试Vue组件渲染错误
+const testVueError = () => {
+  shouldRenderError.value = true
+  showToast('Vue渲染错误已触发，请查看控制台和日志')
+  setTimeout(() => {
+    shouldRenderError.value = false
+    refreshStatistics()
+  }, 100)
+}
+
+
+// 初始化
+onMounted(() => {
+  refreshStatistics()
+})
+</script>
+
+<style lang="scss" scoped>
+.test-error-page {
+  padding: 16px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+  }
+}
+
+.stats-card {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+
+  .stat-item {
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px;
+    text-align: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+    .stat-label {
+      font-size: 12px;
+      color: #666;
+      margin-bottom: 8px;
+    }
+
+    .stat-value {
+      font-size: 24px;
+      font-weight: bold;
+      color: #1989fa;
+    }
+  }
+}
+
+.test-section {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+  .section-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .button-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .result-box {
+    margin-top: 16px;
+    padding: 12px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    border: 1px solid #e9ecef;
+
+    .result-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .result-content {
+      margin: 0;
+      font-size: 12px;
+      color: #666;
+      white-space: pre-wrap;
+      word-break: break-all;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+  }
+}
+
+.refresh-section {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+</style>
+