monitor

前端监控

1. 收集哪些信息

• 错误

  • 接口错误

    • http 状态码

    • 业务响应

  • js脚本错误

  • 静态资源加载错误

    • CSS

    • JS

    • Image

• 性能 （FCP）

  收集页面加载、静态资源、ajax接口等性能信息。指标为 加载时间 、http协议版本、响应体大小

  为业务整体资粮提升提供数据支撑，解决慢查询问题。

  • 页面加载指标

  • 资源

    • CSS

    • JS

    • Image

  • 接口

• 用户数据（PV、UV）

• 辅助信息

  • 行为

    访问轨迹、点击行为、用户ID、设备版本、设备型号、UV/UA标识、traceId 等

    现在的后端服务都会使用APM（应用性能管理）系统，APM工具会在一次完整请求调用之初生成唯一的id，通常叫做traceId，它会记录整个请求过程服务端的链路细节。如果前端能够获取到它，就能通过它去后端APM系统中查询某次请求的日志信息。只要后端做好相关的配置，后端接口在响应客户端http请求时，可以把traceId返回给客户端，SDK便可以去收集ajax请求的traceId，这样前后端监控就能够关联上了。

  • 用户

  • 设备环境数据

2. 应用平台

• Web

• 微信小程序

3. 测试用例

• 单元测试

• 流程测试

4. 字段介绍

• pv

  即用户浏览量，用户每次打开或者刷新页面该页面pv值就加1，通过后台接收到的数据统计访问该页面的次数；

• uv

  即独立访客数，一个电脑设备为一个访客，通过设置永久cookie来标识不同的设备，同一访客访问不同页面uv加一，一天内同一设备多次访问同一页面uv只加一；

• 跳出率 跳出率=访问一个页面的uv数 / uv总数；

• 页面平均访问时长

  从页面进入的时候开始计时，到页面刷新或者关闭的时候停止计时，将时间传到后台，再统计页面访问了多少次，把所有时间相加除以次数，即可得到平均访问时间；

• 访问ip数

  访问页面的局域网ip数，通过document.domain获取，不同的ip访问就加一，一天内同一ip访问多次只加一；

• 用户访问地址

  通过搜狐的插件获取用户当前所在地及设备ip；

• 访问来源类型 来源类型可以分为三类：搜索引擎，外部链接、直接访问；通过document.referrer参数，若为空则是直接访问，再将常见的搜索引擎标识放入一个数组，当document.referrer有值时检索该值中有没有对应的搜索引擎，有来源就是搜索引擎，没有即为外部链接；

• 页面加载时长 window.performance.timing对象中的各个时间节点，通过loadEventEnd - fetchStart可以计算出页面加载时长；

• 浏览器类型 通过navigator.userAgent参数将访问的浏览器内核进行处理，得到访问的浏览器的名称；

• 浏览器和系统版本 navigator.appVersion包含浏览器和系统的版本；

• 电脑屏幕信息 window.screen对象中包含设备屏幕宽高，色深，分辨率。

• 地图热力图 通过用户地址统计各地区使用人数，在地图上用不同颜色渲染出来。

参考文献

• 前端监控SDK开发分享

• 腾讯IMWeb团队-前端页面性能指标基本介绍

无法捕获的错误

• new Image().src='h12414'