如何自研前端监控平台

对一个大项目而言，所有信息的采集异常重要，不只是错误信息的采集，曝光采集，行为采集，动作采集都是非常有用的数据...这里不过多阐述，只说监控！

对于后端而言，有各种服务和日志保驾护航，无需这么辛苦造轮子

前端也已经有各种监控平台轮子 sentry，zabbix等等下面主要讲述自己如何造一个监控平台轮子，整个流程可以分为3部分

错误信息采集 -》 数据分析处理 -》 统计显示（通知）

错误信息采集

其中最为重要的一步是错误信息的采集，如何采集有效的错误信息，并通知到服务，下面具体讲述怎么采集错误

前端错误类型
1、SyntaxError、

语法错误，常发生的是括号不匹配，

2、Uncaught ReferenceError

示例  console.log(c) 未定义 会报此类错误

3、RangeError

数字超出范围，堆栈溢出

4、TypeError

类型不对：number是一个数字  直接new对象   number是一个undefined操作属性都会报错

5、URIError

主要是相关函数的参数不正确，例如

6、EvalError eval()

当eval函数没有被正确执行

常规捕获异常方法

1、try/catch，不过多阐述常规手段

2、window.addEventListener("unhandledrejection")

 用以捕获promise对象的reject 参数`PromiseRejectionEvent`

3、window.onerror也可以用 addEventListener参数

event: string | Event 事件对象  e
source?: string  事件来源文件
lineno?: number, 哪一行报错
colno?: number, 哪一列
error?: Error

4、vue和react也有各自的处理错误的函数

vue有全局配置
vue.config.errorHandler
当前组件有钩子函数 errorCaptured

react可以直接在父组件里面通过
componentDidCatch来监听
static getDerivedStateFromError 来处理errorUI 回退~~~~