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/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>
+