前端监控 #

前端监控一般分为三种

• 页面埋点
• 性能监控
• 异常监控

页面埋点 #

一般起码会监控以下几个数据

• PV（点击量）、UV（访客量）
• 停留时间
• 流量来源
• 用户交互

实现方法

• 手动埋点
  • 在需要埋点的地方写入代码
  • 特点
    • 灵活性大
    • 工作量大
• 无埋点
  • 统计所有的事件并定时上报
  • 后期过滤出需要的数据

性能监控 #

可以很好的了解在各种真实环境下，页面的性能情况如何。

可以直接使用浏览器自带的 Performance API 来实现这个功能，需要调用 performance.getEntriesByType('navigation')，一行代码我们就可以获取页面中各种详细的性能相关信息，返回一个数组，内部包含了相当多的信息，从数据开始在网络中传输到页面加载完成都提供了相应的数据。

异常监控 #

以下两种监控是必不可少的，分别是代码报错以及接口异常上报。

对于代码报错，通常可以使用window.onerror，该方法可以拦截到大部分的详细报错信息，也有例外

• 对于跨域的代码错误会显示Script error，我们需要给script标签添加crossorigin属性
• 对于某些浏览器可能不会显示调用栈信息，可以通过arguments.callee.caller来做栈递归。
• 对于异步代码来说，可以使用catch来捕获错误

对于线上的代码都是压缩过的，需要再打包时生成sourceMap便于调试。

对于捕获的错误需要上传服务器，通常可以通过img标签的src发起一个请求。

对于接口异常，可以列举出出错的状态码，一旦出现此类状态码就可以立即上报出错。接口异常上报可以让开发人员迅速知道有哪些接口出现了大面积的报错，以便迅速修复问题。