前端异常监控、性能监控

出发点： 采集用户行为数据

获取用户行为以及跟踪产品在用户端的使用情况。数据分析用户行为，进行产品的功能设计。

数据监控

数据监控，顾名思义就是监听用户的行为。也可为异常监控提供触发行为记录。常见的数据监控包括：

• PV: 即页面浏览量或点击量。
• UV:指访问某个站点或点击某条新闻的不同IP地址的人数
• 用户在每一个页面的停留时间
• 用户通过什么入口来访问该网页
• 用户在相应的页面中触发的行为
• 用户机型

统计这些数据，了解用户来源的渠道，可以促进产品的推广，知道用户在每一个页面停留的时间，可以针对停留较长的页面，增加广告推送等等。

出发点： 性能优化

性能监控

• 不同用户，不同机型和不同系统下的首屏加载时间
• 白屏时间
• http等请求的响应时间
• 静态资源整体下载时间
• 页面渲染时间
• 页面交互动画完成时间

这些指标，可以反映出前端性能的好坏，从而相应的去优化，比如兼容低版本浏览器的动画效果。

监控渲染时间（首屏加载时间）

监听document的DOMContentLoaded事件来监听dom挂载，window的load事件来监听页面所有资源加载渲染完毕。可统计出页面首屏加载时间即所有DOM渲染时间：

var start=Date.now();
document.addEventListener('DOMContentLoaded', function() {
   
   fetch('some api',{
   
       type:'dom complete',
       data:{
   
         domCompletedTime:Date.now()-start
       }
   })
});
window.addEventListener('load', function() {
   
   fetch('some api',{
   
       type:'load complete',
       data:{
   
         LoadCompletedTime:Date.now()-start
       }
   })
});

接口响应时间

如果埋点的事件不是很多，上报可以时时进行。如果埋点的事件较多，或者说网页内部交互频繁，可以通过本地存储的方式先缓存上报信息，然后定期上报。

出发点：系统稳定性

异常监控

前端代码在执行过程中会发生异常，因此需要引入异常监控。
及时上报异常情况，可以避免线上故障的发上。虽然大部分异常可以通过try catch的方式捕获，但是比如内存泄漏以及其他偶现的异常难以捕获。

• Javascript的异常监控
• 样式丢失的异常监控

JS异常场景

• 页面元素异常（例如按钮无法点击、元素不展示）
• 页面卡顿
• 页面白屏

从根本上来说，异常就是一个数据结构，它存了异常发生时相关信息，譬如错误码、错误信息等。其中 message 属性是唯一一个能够保证所有浏览器都支持的属性，所以，在考虑浏览器兼容性时，最好还是只使用 message 属性。

执行 JS 期间可能会发生的错误有很多类型。而当错误发生的时候就会抛出相应的错误对象。ECMA-262 中定义了下列 7 种错误类型：

1. Error：错误的基类，其他错误都继承自该类型
2. EvalError：Eval 函数执行异常
3. RangeError：数组越界
4. ReferenceError：尝试引用一个未被定义的变量时，将会抛出此异常
5. SyntaxError：语法解析不合理
6. TypeError：类型错误，用来表示值的类型非预期类型时发生的错误
7. URIError：以一种错误的方式使用全局 URI处理函数而产生的错误

捕获异常一般可用try.....catch.....,但是如果 catch 块内抛出异常，catch 块的异常是无法被捕获的。现在可考虑用Promise。

捕获到异常之后？

捕获到错误后，我们需要思考当错误发生时：

• 错误是否是致命的，会不会导致其它连带错误
• 后续的代码逻辑还能不能继续执