diff --git a/src/components/common/ErrorBoundary.vue b/src/components/common/ErrorBoundary.vue index afac496..861a8f8 100644 --- a/src/components/common/ErrorBoundary.vue +++ b/src/components/common/ErrorBoundary.vue @@ -31,12 +31,35 @@ const hasError = ref(false) const errorMessage = ref('') let unwatchRoute: (() => void) | null = null +// 判断是否为 API 请求错误(这些错误不应该触发错误边界) +const isApiError = (err: any): boolean => { +console.log('err:', err); + // axios 错误通常有 config 属性 + if ((err as any).config) return true + // 网络错误 + if (err.message === 'Network Error') return true + // 超时错误 + if (err.message?.includes('timeout') || err.message?.includes('Timeout')) return true + // 请求被取消 + if (err.message?.includes('cancel') || err.name === 'CanceledError') return true + // 包含请求相关信息的错误 + if (err.message?.includes('request') || err.message?.includes('Request') || err.data || err.msg) return true + return false +} + // 全局错误捕获 onErrorCaptured((err: Error, instance: any, info: string) => { console.error('❌ ErrorBoundary 捕获到错误:', err) console.error('错误来源组件:', instance?.$options?.name || '未知组件') console.error('错误信息:', info) + // 如果是 API 请求错误,不触发错误边界,让 API 模块自己处理 + if (isApiError(err)) { + console.log('API 请求错误,由 API 模块处理') + return false + } + + // 只有真正的渲染错误才触发错误边界 hasError.value = true errorMessage.value = err.message || '未知错误'