当前位置: 首页 > Web前端 > vue.js

如何开发一个自研的前端监控平台

时间:2023-03-31 23:12:01 vue.js

对于一个大项目来说,所有信息的收集是极其重要的,不仅仅是错误信息的收集,曝光收集、行为收集、动作收集都是非常有用的数据...这里不多解释,只是监控!对于后端,有各种服务和日志来保护,不用那么辛苦造轮子。前端已经有各种监控平台轮子sentry、zabbix等,下面主要介绍如何搭建监控平台轮子。整个过程可以分为3部分错误信息收集-》数据分析处理-》统计展示(通知)错误信息收集最重要的一步就是错误信息的收集,如何收集有效的错误信息并通知服务,下面介绍前端如何收集error类型的错误1.SyntaxError,语法错误,常出现在括号不匹配的时候,2.UncaughtReferenceError例子console.log(c)undefined会报这种类型的错误3.RangeErrornumber越界,栈溢出4.TypeError类型错误:number是一个数字,直接new对象number是一个未定义的操作属性,会报错5.URIError主要是相关函数的参数不正确,对于example6.EvalErroreval()当eval函数没有正确执行时,捕获异常的正常方法1.try/catch,但在常规方法上详细说明2.window.addEventListener("unhandledrejection")用于捕获promise对象的拒绝参数`PromiseRejectionEvent`3.window.onerror也可以使用addEventListener参数event:string|Event事件对象esource?:string事件源文件lineno?:number,哪一行报错colno?:number,哪一列报错?:Error4,vue和react也有自己的错误处理函数vue有全局配置vue.config.errorHandler当前组件有一个钩子函数errorCapturedreact可以直接在parent组件中使用componentDidCatch监听staticgetDerivedStateFromError处理errorUIfallback~~~~