前端监控之数据分类

[xchunzhao]

前言

针对前端监控，目前内部主要推的是异常监控。针对监控需要涉及的范围没有探究，这里就当做个记录。

前端数据有哪些

前端的数据有很多，从大众关注的UV 、PV，到客户端的网络环境、登录状态，再到浏览器、操作系统信息，最后到页面性能、JS异常，这些数据都是可以在前端收集的。数据很多、很杂，不进行很好的分类肯定会导致统计混乱，也不利于统计代码的组织，下面就对几种普遍的数据需求进行了分类。

数据分类

访问数据

访问数据是基于用户每次在浏览器上打开目标页面来统计的，它是以 PV 为粒度的统计，一个 PV 只统计一次访问数据。访问数据可以算作是最基础、覆盖面最广的一种统计，可以统计到很多的指标项，下面列出了一些较为常见的指标项：

• 访问数据分类

  • PV/UV

    最基础的 PV（页面访问数量）、UV（独立访问用户数量）

  • 页面来源

    页面refer,用来定位页面入口

  • 操作系统

    了解用户的 OS 状况，帮助分析用户群体的特征，特别是移动端，iOS 和 Android 的分布就更有意义了

  • 浏览器

    可以统计到各种浏览器的占比，对于是否继续兼容 IE6、新技术（HTML5、CSS3 等）的运用等调研提供参考价值

  • 分辨率

    对页面设计提供参考，特别是响应式设计

  • 登录率

    登陆用户具有更高的分析价值，引导用户登陆是非常重要的

  • 地域分布

    访问用户在地理位置上的分布，可以针对不同地域做运营、活动等

  • 网络类型

    wifi/3G/2G，为产品是否需要适配不同网络环境做决策

  • 访问时段

    掌握用户访问时间的分布，引导消峰填谷、节省带宽

  • 停留时长

    判断页面内容是否具有吸引力，对于需要长时间阅读的页面比较有意义

性能数据

页面 DOM 结构越来越复杂，但是又要追求用户体验，这就对页面的性能提出了更高的要求。性能的监控数据主要是用来衡量页面的流畅程度，也有一些主要的指标。

• 性能数据分类

  • 白屏时间

  用户从打开页面开始到页面开始有东西呈现为止，这过程中占用的时间就是白屏时间

  • 首屏时间

  用户浏览器首屏内所有内容都呈现出来所花费的时间

  • 用户可操作时间

  用户可以进行正常的点击、输入等操作

  • 页面总下载时间

  页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

  • 自定义的时间点

  对于开发人员来说，完全可以自定义一些时间点，例如：某个组件 init 完成的时间、某个重要模块加载的时间等等

用户操作数据

在用户的所有操作中，点击应该是最为主要的一个行为，包含了：pc 端鼠标的 click，移动端手指的 touch。用户的每次点击都是一次诉求，从点击数据中可以挖掘的信息其实有很多，下面只列出了我们目前所关注的指标。

• 用户操作数据分类

  • 页面总点击量

  • 人均点击量

  尤其针对导航类网页

  • 流出url

  了解网页导流的去向

  • 点击时间

  用户的所有点击行为，在时间上的分布，反映了用户点击操作的习惯

  • 首次点击时间

  同上，但是只统计用户的第一次点击，如果该时间偏大，是否就表明页面很卡导致用户长时间不能点击呢？

  • 点击热力图

  根据用户点击的位置，我们可以画出整个页面的点击热力图，可以很直观的了解到页面的热点区域

异常数据

这里的异常是指 JS 的异常，用户的浏览器上报 JS 的 bug，这会极大地降低用户体验，当然 QA 能够覆盖到大部分的 bug，但肯定也会有一些 bug 在线上出现。JS 的异常捕获只有两种方式：window.onerror、try/catch，只列出捕获到异常时，一般需要采集哪些信息

• 异常数据分类

  • 发生异常的环境

  包括IP、浏览器环境、OS环境

  • 发生异常的上下文

  主要是记录异常发生的前置操作，便于复现相关异常

  • 异常代码所在行

  结合sourcemap可以快速定位到异常代码处

  • 堆栈信息

  同异常上下文

总结

本篇主要是简单罗列前端数据分类，为后续做前端监控做好需求分析。后续会针对性能、异常、用户操作详细分析。