前端监控

为什么要有前端监控？
用户访问我们的业务时，整个访问过程大致可以分为三个阶段：页面生产时（Server 端状态）、页面加载时和页面运行时。
为了保证线上业务稳定运行，我们会在 Server 端对业务的运行状态进行各种监控。现有的 Server 端监控系统相对已经很成熟了，而页面加载和页面运行时的状态监控一直比较欠缺。例如：

• 无法第一时间获知用户访问我们的站点时遇到的错误；
• 各个国家、各个地区的用户访问我们站点的真实速度未知；
• 每个应用内有大量的异步数据调用，而它们的性能、成功率都是未知的。

控制台功能

1. 页面访问速度

关键性能指标：

• 首次渲染
• 首屏时间
• 首次可交互
• DOM Ready
• 页面完全加载时间

区间段耗时：

• DNS 查询
• TCP 连接
• 请求响应
• 内容传输
• DOM 解析
• 资源加载

2. JS错误统计
3. API请求监控

• 每个 API 的成功率
• API 返回信息
• API 接口的调用成功平均耗时
• API 接口的调用失败平均耗时

以上都是一些理论知识，下面来从四个方面来讲怎么进行前端监控

1. 采集错误

异常捕获

a、全局捕获

通过全局的接口，将捕获代码集中写在一个地方，可以利用的接口有：

• window.addEventListener(‘error’) 或 window.addEventListener(“unhandledrejection”) 或document.addEventListener(‘click’)等
• 框架级别的全局监听，例如aixos中使用interceptor进行拦截，vue、react都有自己的错误采集接口，比如react的componentDidCatch
  
• 通过对全局函数进行封装包裹，实现在在调用该函数时自动捕获异常
• 对实例方法重写（Patch），在原有功能基础上包裹一层，例如对console.error进行重写，在使用方法不变的情况下也可以异常捕获

b、单点捕获

在业务代码中对单个代码块进行包裹，或在逻辑流程中打点，实现有针对性的异常捕获：

• try…catch
• 专门写一个函数来收集异常信息，在异常发生时，调用该函数
• 专门写一个函数来包裹其他函数，得到一个新函数，该新函数运行结果和原函数一模一样，只是在发生异常时可以捕获异常

Script Error跨域错误

该报错是因为同源限制（协议、域名、端口）
解决方案1
应用在<script>标签上的属性crossorigin, 添加之后即可保证即使是跨域错误也能捕获到完整的错误信息。
crossorigin 生效需要服务器端和浏览器端同时支持。服务器端支持比较简单，即返回跨域脚本的服务器（一般为 CDN 服务器）正确的带上 CORS 响应头 —— Access-Control-Allow-Origin: * —— 即可
解决方案2

2. 存储错误与上报

错误存储

错误上报

3. 分析错误

4. 报警处理

借鉴文章1 | 文章2