企业官网建设流程全解析

济南建设网站企业报价,公司背景设计图,湘潭网站建设 在线磐石网络,网站建设 信息化程度背景问题 在生产环境中#xff0c;错误处理和监控是保证应用稳定性的重要环节。 方案思考 如何统一错误处理如何收集错误信息如何上报错误日志 具体实现 错误处理系统#xff1a; // utils/errorHandler.ts - 错误处理系统 import { App } from vue;// 错误类型定义 in…背景问题在生产环境中错误处理和监控是保证应用稳定性的重要环节。方案思考如何统一错误处理如何收集错误信息如何上报错误日志具体实现错误处理系统// utils/errorHandler.ts - 错误处理系统import{App}fromvue;// 错误类型定义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[][];privateisReportingfalse;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){consttargetevent.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){caseerror:returnerrorInfo.typejs||errorInfo.typepromise;casewarn:returntrue;default:returntrue;}}privatescheduleReport(){if(this.isReporting)return;this.isReportingtrue;setTimeout((){this.flushQueue();this.isReportingfalse;},1000);}privateflushQueue(){if(this.queue.length0)return;constdataJSON.stringify(this.queue);this.queue[];// 发送错误报告if(sendBeaconinnavigator){navigator.sendBeacon(this.config.url,data);}else{fetch(this.config.url,{method:POST,body:data,headers:{Content-Type:application/json}}).catch((){// 忽略上报错误});}}}// 创建全局错误处理器实例exportconstglobalErrorHandlernewErrorHandler({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 langts 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 classerror-boundary h3出错了!/h3 p{{ errorMessage }}/p button clickhandleReset重试/button /div /template效果验证通过统一的错误处理系统可以有效地捕获、记录和上报各种类型的错误提高应用的稳定性。经验总结错误处理应该是系统性的需要从前端到后端建立完整的错误监控体系。