Skip to content

监控

一般分为三种:

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

页面埋点

  • PV / UV
    • page viewunique visitor,用户访问的数量与独立访客数
  • 停留时长
  • 流量来源
  • 用户交互

手写埋点

自主选择需要监控的数据然后在相应的地方写入代码。

缺点

工作量较大,每个需要监控的地方都得插入代码

无埋点

统计所有发生的事件并定时上报,然后服务端对数据进行过滤得出需要的数据

可以采用事件代理的方式监听页面中所需的事件

性能监控

使用Performance API来实现

关键时间节点: performance.timing 或者 performance.getEntriesByType('navigation')

通过时间节点之间的差值,得出某个过程所花费的时间

图片

名称计算
DNS查询耗时domainLookupEnd-domainLookupStart
TCP连接耗时connectEnd-connectStart
内容加载耗时responseEnd-connectStart
首包时间responseStart-domainLookupStart
白屏时间(首次渲染时间)responseEnd-fetchStart
首次可交互时间domInteractive-fetchStart
HTML加载完成domContentLoaded - fetchStart
页面完全加载loadEventStart-fetchStart

异常监控

代码报错

使用 window.onerror 拦截报错,可以拦截大部分详细报错信息

特殊

  • 跨域代码显示:Script error,可以通过为script添加的crossorigin 属性解决

接口异常上报

  • 可以通过img 标签的 src 发起一个请求