Vue—— Vue3 + Node.js 后台管理系统 之 【错误处理与监控】

背景问题

在生产环境中，错误处理和监控是保证应用稳定性的重要环节。

方案思考

• 如何统一错误处理
• 如何收集错误信息
• 如何上报错误日志

具体实现

错误处理系统：

// utils/errorHandler.ts - 错误处理系统import{App}from'vue';// 错误类型定义interfaceErrorInfo{type:'js'|'resource'|'promise'|'ajax';message:string;stack?:string;url?:string;line?:number;column?:number;timestamp:number;userAgent?:string;customInfo?:any;}// 错误上报配置interfaceReportConfig{url:string;enable:boolean;level:'error'|'warn'|'info';samplingRate?:number;// 采样率}classErrorHandler{privateconfig:ReportConfig;privatequeue:ErrorInfo[]=[];privateisReporting=false;constructor(config:ReportConfig){this.config={samplingRate:1,...config};this.init();}privateinit(){// 捕获JavaScript错误window.addEventListener('error',this.handleError.bind(this));// 捕获Promise错误window.addEventListener('unhandledrejection',this.handlePromiseRejection.bind(this));// 捕获资源加载错误window.addEventListener('error',this.handleResourceError.bind(this),true);}privatehandleError(event:ErrorEvent){consterrorInfo:ErrorInfo={type:'js',message:event.message,stack:event.error?.stack,url:event.filename,line:event.lineno,column:event.colno,timestamp:Date.now(),userAgent:navigator.userAgent};this.report(errorInfo);}privatehandlePromiseRejection(event:PromiseRejectionEvent){consterrorInfo:ErrorInfo={type:'promise',message:event.reason?.message||String(event.reason),stack:event.reason?.stack,timestamp:Date.now(),userAgent:navigator.userAgent};this.report(errorInfo);}privatehandleResourceError(event:ErrorEvent){if(event.target!==window){consttarget=event.targetasHTMLScriptElement|HTMLLinkElement|HTMLImageElement;consterrorInfo:ErrorInfo={type:'resource',message:`Resource load error:${target.src||target.href}`,url:target.src||target.href,timestamp:Date.now(),userAgent:navigator.userAgent};this.report(errorInfo);}}publicreport(errorInfo:ErrorInfo){// 采样率控制if(Math.random()>(this.config.samplingRate||1)){return;}// 级别过滤if(this.shouldReport(errorInfo)){this.queue.push(errorInfo);this.scheduleReport();}}privateshouldReport(errorInfo:ErrorInfo):boolean{if(!this.config.enable)returnfalse;switch(this.config.level){case'error':returnerrorInfo.type==='js'||errorInfo.type==='promise';case'warn':returntrue;default:returntrue;}}privatescheduleReport(){if(this.isReporting)return;this.isReporting=true;setTimeout(()=>{this.flushQueue();this.isReporting=false;},1000);}privateflushQueue(){if(this.queue.length===0)return;constdata=JSON.stringify(this.queue);this.queue=[];// 发送错误报告if('sendBeacon'innavigator){navigator.sendBeacon(this.config.url,data);}else{fetch(this.config.url,{method:'POST',body:data,headers:{'Content-Type':'application/json'}}).catch(()=>{// 忽略上报错误});}}}// 创建全局错误处理器实例exportconstglobalErrorHandler=newErrorHandler({url:'/api/errors/report',enable:true,level:'error'});// 在main.ts中注册exportfunctionregisterErrorHandler(app:App){// 捕获组件错误app.config.errorHandler=(err,instance,info)=>{// 上报错误globalErrorHandler.report({type:'js',message:err.message,stack:err.stack,timestamp:Date.now(),customInfo:{component:instance?.$options.name,lifecycle:info}});returnfalse;// 阻止错误继续向上传播};returnglobalErrorHandler;}

错误边界组件：

<!-- components/ErrorBoundary.vue --> <script setup lang="ts"> import { ref, onErrorCaptured } from 'vue'; const hasError = ref(false); const errorMessage = ref(''); onErrorCaptured((err, instance, info) => { hasError.value = true; errorMessage.value = err.message; // 上报错误 globalErrorHandler.report({ type: 'js', message: err.message, stack: err.stack, timestamp: Date.now(), customInfo: { component: instance?.$options.name, lifecycle: info } }); return false; // 阻止错误继续向上传播 }); const handleReset = () => { hasError.value = false; errorMessage.value = ''; }; </script> <template> <div v-if="!hasError"> <slot /> </div> <div v-else class="error-boundary"> <h3>出错了!</h3> <p>{{ errorMessage }}</p> <button @click="handleReset">重试</button> </div> </template>

效果验证

通过统一的错误处理系统，可以有效地捕获、记录和上报各种类型的错误，提高应用的稳定性。

经验总结

错误处理应该是系统性的，需要从前端到后端建立完整的错误监控体系。