- 更快发现问题和解决问题
- 做产品的决策依据
- 提升前端开发的技术深度和广度
- 为业务扩展提供更多可能性
前端的数据其实有很多，从大众普遍关注的 PV、UV、广告点击量，到客户端的网络环境、登陆状态，再到浏览器、操作系统信息，最后到页面性能、JS 异常， 这些数据都可以在前端收集到。
-
访问相关的数据
- PV/UV：最基础的 PV（页面访问数量）、UV（独立访问用户数量）
- 页面来源：页面的 refer，可以定位页面的入口
- 操作系统：了解用户的 OS 状况，帮助分析用户群体的特征，特别是移动端，iOS 和 Android 的分布就更有意义了
- 浏览器：可以统计到各种浏览器的占比，对于是否继续兼容 IE6、新技术（HTML5、CSS3 等）的运用等调研提供参考价值
- 分辨率：对页面设计提供参考，特别是响应式设计
- 登录率：登陆用户具有更高的分析价值，引导用户登陆是非常重要的
- 地域分布：访问用户在地理位置上的分布，可以针对不同地域做运营、活动等
- 网络类型：wifi/3G/2G，为产品是否需要适配不同网络环境做决策
- 访问时段：掌握用户访问时间的分布，引导消峰填谷、节省带宽
- 停留时长：判断页面内容是否具有吸引力，对于需要长时间阅读的页面比较有意义
- 到达深度：和停留时长类似，例如百度百科，用户浏览时的页面到达深度直接反映词条的质量
-
性能相关的数据
- 白屏时间：用户从打开页面开始到页面开始有东西呈现为止，这过程中占用的时间就是白屏时间
- 首屏时间：用户浏览器首屏内所有内容都呈现出来所花费的时间
- 用户可操作时间：用户可以进行正常的点击、输入等操作
- 页面总下载时间：页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间
- 自定义的时间点：对于开发人员来说，完全可以自定义一些时间点，例如：某个组件 init 完成的时间、某个重要模块加载的时间等等
-
点击相关的数据
- 页面总点击量
- 人均点击量：对于导航类的网页，这项指标是非常重要的
- 流出 url：同样，导航类的网页，直接了解网页导流的去向
- 点击时间：用户的所有点击行为，在时间上的分布，反映了用户点击操作的习惯
- 首次点击时间：同上，但是只统计用户的第一次点击，如果该时间偏大，是否就表明页面很卡导致用户长时间不能点击呢？
- 点击热力图：根据用户点击的位置，我们可以画出整个页面的点击热力图，可以很直观的了解到页面的热点区域
-
异常相关的数据 这里的异常是指 JS 的异常，用户的浏览器上报 JS 的 bug，这会极大地降低用户体验
- 异常的提示信息：这是识别一个异常的最重要依据，如：’e.src’ 为空或不是对象
- JS 文件名
- 异常所在行
- 发生异常的浏览器
- 堆栈信息：必要的时候需要函数调用的堆栈信息，但是注意堆栈信息可能会比较大，需要截取
-
其他数据 除了上面提到的 4 类基本的数据统计需求，我们当然还可以根据实际情况来定义一些其他的统计需求，如用户浏览器对 canvas 的支持程度， 再比如比较特殊的 – 用户进行轮播图翻页的次数，这些数据统计需求都是前端能够满足的，每一项统计的结果都体现了前端数据的价值
- FP(First Paint)。首次绘制时间，包括了任何用户自定义的背景绘制，它是首先将像素绘制到屏幕的时刻。
- FCP(First Content Paint)。首次内容绘制。是浏览器将第一个DOM渲染到屏幕的时间，可能是文本、图像、SVG等。这其实就是白屏时间
- FMP(First Meaningful Paint)。首次有意义绘制。页面有意义的内容渲染的时间
- LCP(Largest Contentful Paint)。最大内容渲染。代表在viewport中最大的页面元素加载的时间。
- DCL(DomContentLoaded)。DOM加载完成。当HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发。无需等待样式表，图像和子框架的完成加载。
- L(onload)。当依赖的资源全部加载完毕之后才会触发。
- TTI(Time to Interactive)。可交互时间。用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。
- FID(First Input Delay)。首次输入延迟。用户首次和页面交互(单击链接、点击按钮等)到页面响应交互的时间。
-
稳定性(stability)
- JS错误。JS执行错误或者promise异常
- 资源异常。script、link等资源加载异常
- 接口错误。ajax或fetch请求接口异常
- 白屏。页面空白
-
用户体验(experience)
- 加载时间。各个阶段的加载时间
- TTFB(Time To First Byte 首字节时间)。是指浏览器发起第一个请求到数据返回第一个字节所消耗的时间，这个时间包含了网络请求时间、后端处理时间。
- FP(First Paint 首次绘制)。首次绘制包括了任何用户自定义的背景绘制，它是将第一个像素点绘制到屏幕的时间。
- FCP(First Content Paint 首次内容绘制)。首次内容绘制是浏览器将第一个DOM渲染到屏幕的时间，可以是任何文本、图像、SVG等的时间。
- FMP(First Meaningful Paint 首次有意义绘制)。 首次有意义绘制是页面可用性的量度标准。
- FID(First Input Delay 首次输入延迟)。用户首次和页面交互到页面响应交互的时间。
- 卡顿。 超过50ms的任务。
-
业务(business)
- PV。 page view 即页面浏览量或点击量
- UV。指访问某个站点的不同IP地址的人数。
- 页面停留时间。用户在每一个页面的停留时间。
- 前端埋点
- 数据上报
- 分析和计算 将采集到的数据进行加工汇总。
- 可视化展示 将数据按各种纬度进行展示
- 监控报警 发现问题后按一定的条件触发报警
-
代码埋点
- 代码埋点，就是以嵌入代码的形式进行埋点，比如要监控用户的点击事件，会选择在用户点击时插入一段代码，保存这个监听行为或者直接将监听行为 以某一种数据格式直接传递给服务器端。
- 优点是可以在任意时刻，精确的发送或保存所需要的数据信息。
- 缺点是工作量大
-
可视化埋点
- 通过可视化交互的手段，代替代码埋点。
- 将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义 的增加埋点事件等等。最后输出的代码耦合了业务代码和埋点代码
- 可视化埋点其实是用系统来代替手工插入埋点代码。
-
无痕埋点
- 前端的任意一个事件都被绑定一个标识，所有的事件都被记录下来。
- 通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析
- 无痕埋点的优点是采集全量数据，不会出现漏埋和误埋等现象
- 缺点是给数据传输和服务器增加压力，也无法灵活定制数据结构
-
监控错误
- 错误分类。
- JS错误
- Promise异常
- 资源异常
- 监听error
- 错误分类。
-
数据结构设计
- jsError
let info = { "title": "前端监控系统", // 页面标题 "url": "http://localhost:8080", // 页面url "timestamp": "1212121212121212", // 访问时间戳 "userAgent": "chrome", // 用户浏览器类型 "kind": "stability", // 大类 "type": "error", // 小类 "errorType": "jsError", // 错误类型 "message": "uncaught TypeError:blablabla", // 错误详情 "filename": "http://localhost:8080/", // 访问的文件名 "position": "0:0", // 行列信息 "stack": "btn Click (http://localhost:8080)", // 堆栈信息 "selector": "HTML BODY #container .content INPUT", // 选择器 }
- 接口异常数据结构设计
let info = { "title": "前端监控系统", // 页面标题 "url": "http://localhost:8080", // 页面url "timestamp": "1212121212121212", // 访问时间戳 "userAgent": "chrome", // 用户浏览器类型 "kind": "stability", // 大类 "type": "xhr", // 小类 "eventType": "load", // 事件类型 "pathname": "/success", "status": "200-0k", "duration": "5", // 持续时间 "response": "hahah", // 响应内容 "params": "参数", // 参数 }
- 白屏
screen返回当前window的screen对象，返回当前渲染窗口中和屏幕有关的属性
innerWidth只读的window属性。innerWidth返回以像素为单位的窗口的内部宽度
innerHeight窗口的内部高度(布局视口)的高度
layout_viewport
elementsFromPoint方法可以获取到当前视口内指定坐标处，由里到外排列的所有元素。
let info = { title: '前端监控系统', url: 'http://localhost:8080/', timestamp: '1239404040404044', userAgent: 'chorme', kind: 'stability', type: 'blank', emptyPoints: "0", // 空白点 screen: "2049 * 1152", // 分辨率 viewPoint: "2048 * 994", // 视口 selector: "HTML BODY #container", // 选择器 }