一、步骤？

1、收集

• 业务数据：业务操作、接口请求；
• 质量数据：性能情况、错误异常等；
• 运营数据：PV、UV、转化率、留存率

2、上报

3、入库、分析

二、 收集

2.1 收集方式

1. 点击行为

使用addEventListener监听全局上的click事件，将事件和DOM元素名字收集。与错误信息一起上报。

2. 发送请求

监听XMLHttpRequest的onreadystatechange回调函数

3. 页面跳转

监听window.onpopstate，页面进行跳转时会触发。

4. 控制台行为

重写console对象的info等方法

2.2 异常监控

JS 执行异常

• 使用try-catch的话捕捉不到具体语法错误和异步错误，所以推荐用在可预见情况下的错误监控
• 使用 window.onerror ，比try-catch强，不过也捕获不到资源加载异常或者接口异常，推荐用来捕获预料之外的错误

资源加载异常

• 使用 addEventListener('error', callback, true) 在捕获阶段捕捉资源加载错误信息，然后上报服务器

Promise 异常

使用 addeventListener('unhandledrejection',callback)捕获 Promise 错误

Vue 异常

• errorHandle
  Vue为组件呈现函数和监视程序期间没有捕获的错误分配的一个处理程序。不过这个方法一旦捕获取错误后，错误就不会抛到控制台
• warnHandle
• renderError
• errorCaptured

React 异常

• static getDerivedStateFromError
• componentDidCatch

三、上报

navigator.sendBeacon

四、入库分析

五、sentry使用

• sentry使用

推荐

• # 前端异常监控和容灾

欢迎关注我的前端自检清单，我和你一起成长