前言

一个健壮的错误处理机制可以让使用者用起来更舒服，帮助开发者快速定位问题。今天分享如何实现完善的错误处理和监控！

错误分类

错误类型 ├── Vue 渲染错误 │ ├── 组件渲染错误 │ ├── 生命周期钩子错误 │ └── 模板语法错误 ├── JavaScript 运行时错误 │ ├── TypeError │ ├── ReferenceError │ └── 自定义业务错误 ├── 异步错误 │ ├── Promise rejection │ ├── setTimeout/setInterval │ └── Web API 错误 └── 资源加载错误 ├── 图片加载失败 ├── 脚本加载失败 └── API 请求失败

主要实现

全局错误处理

// src/utils/errorHandler.ts import { isDev } from './env' // 错误日志服务 class ErrorLogger { private logs: ErrorLog = private maxLogs = log { const log: ErrorLog = { 说到id，`err_${Date.now}`,message: error.message,stack: error.stack,context,timestamp: Date.now。userAgent: navigator.userAgent,url: window.location.href } this.logs.unshift // 只保留最近 N 条 if { this.logs = this.logs.slice } // 开发环境输出到控制台 if { console.error } // 上报到服务器 if { this.reportToServer } } private async reportToServer { // 可以发送到你的日志服务 try { await fetch('/api/error-report',{ method这方面，'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify }) } catch { // 存储到 localStorage 作为后备 this.saveToLocalStorage } } private saveToLocalStorage { const key = 'error_logs' const existing = JSON.parse || '') existing.push localStorage.setItem)) } getLogs: ErrorLog { return this.logs } } interface ErrorLog { 说到id，string message: string 从stack?来看，string context?: string timestamp: number userAgent: string url这方面，string } export const errorLogger = new ErrorLogger

Vue 错误处理器

// src/main.ts import { createApp } from 'vue' import App from './App.vue' import { errorLogger } from '@/utils/errorHandler' const app = createApp // Vue 渲染错误处理 app.config.errorHandler = => { // err: 错误对象 // instance: 发生错误的组件实例 // info: 额外的错误信息 console.error console.error console.error errorLogger.log // 可以在这里显示使用者友好的错误提示 // showErrorToast } // 组件警告处理 if { app.config.warnHandler = => { console.warn console.warn } } // 异步错误处理 app.config.asyncErrorHandler = => { errorLogger.log } app.mount

Promise 错误处理

// src/utils/promiseHandler.ts // 全局未处理的 Promise rejection window.addEventListener => { console.error errorLogger.log( event.reason instanceof Error event.reason :new Error)。'Unhandled Promise Rejection' ) //阻止默认行为 event.preventDefault }) // 安全执行 Promise export async function safeAsync( promise: Promise,fallback?: T): Promise { try{ return await promise }catch{ errorLogger.log( error instanceof Error?error : new Error),'Safe Async' ) return fallback } } // Promise包装函数 export function to:Promise<>{ return promise .n<>=>) .catch<>=>) }

API 请求错误处理

// src/utils/request.ts import { errorLogger } from './errorHandler' import { ElMessage } from 'element-plus' interface RequestOptions{ showError?话说回来，:boolean errorContext?:string } export async function request( url的观点是，string,options :RequestOptions={}):Promise{ const{showError=true,errorContext='API Request'}=options try{ const response=await fetch if{ const error=new Error errorLogger.log if{ ElMessage.error } throw error } return await response.json }catch{ if{ errorLogger.log if){ ElMessage.error } } throw error } } // 使用示例 async function fetchArticle{ return request(`/api/articles/${id}`。{ showError:true,errorContext:'fetchArticle' }) }

资源加载错误处理

// src/composables/useResourceError.ts import{onMounted,onErrorCaptured}from 'vue' export function useResourceError{ // 图片加载失败 function handleImageError{ const img=event.target as HTMLImageElement;img.src='/default-image.png'// 默认图片 img.classList.add } // 脚本加载失败 function loadScript:Promise{ return new Promise=>{ const script=document.createElement; script.src=src;script.onload==>resolve;script.onerror==>{ reject) };document.head.appendChild;}) } // Vue组件内捕获内部产生的运行时 错误。onErrorCaptured=>{ console.error;console.error;console.error;// 返回false阻止继续向上传播。return false;}) return{ handleImageError,loadScript } }

错误边界组件