关于前端监控，上报，性能数据采集

[lizheng0515]

介绍

前端监控通常包括行为监控、异常监控、性能监控等

一个监控系统，大致可以分为四个阶段：日志采集、日志存储、统计与分析、报告和警告。

1. 收集阶段：收集异常日志，先在本地做一定的处理，采取一定的方案上报到服务器。

2. 存储阶段：后端接收前端上报的异常日志，经过一定处理，按照一定的存储方案存储。

3. 分析阶段：分为机器自动分析和人工分析。机器自动分析，通过预设的条件和算法，对存储的日志信息进行统计和筛选，发现问题，触发报警。人工分析，通过提供一个可视化的数据面板，让系统用户可以看到具体的日志数据，根据信息，发现异常问题根源。

4. 报警阶段：分为告警和预警。告警按照一定的级别自动报警，通过设定的渠道，按照一定的触发规则进行。预警则在异常发生前，提前预判，给出警告。

异常捕获

• window.addEventListener(‘error’)

• window.addEventListener(“unhandledrejection”)

• document.addEventListener(‘click’) 等

• 框架级别的全局监听，例如aixos中使用interceptor进行拦截，vue、react都有自己的错误采集接口

• 通过对全局函数进行封装包裹，实现在在调用该函数时自动捕获异常

• 对实例方法重写，在原有功能基础上包裹一层，例如对console.error进行重写，在使用方法不变的情况下也可以异常捕获

  window.onerror 全局捕获错误

页面 JS 错误监控方法

上报数据：

可以使用 navigator.sendBeacon() 来进行上报。

它的技术特点是：

使用 sendBeacon() 方法会使用户代理（浏览器）在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。

性能数据采集

性能数据采集需要使用 window.performance API

https://developer.mozilla.org/zh-CN/docs/Web/API/Performance

Performance 接口可以获取到当前页面中与性能相关的信息，它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

为了方便大家理解 timing 各个属性的意义。我在知乎找到一位网友对于 timing 写的简介，在此转载一下。

通过以上数据，我们可以得到几个有用的时间

// 重定向耗时
redirect: timing.redirectEnd - timing.redirectStart,
// DOM 渲染耗时
dom: timing.domComplete - timing.domLoading,
// 页面加载耗时
load: timing.loadEventEnd - timing.navigationStart,
// 页面卸载耗时
unload: timing.unloadEventEnd - timing.unloadEventStart,
// 请求耗时
request: timing.responseEnd - timing.requestStart,
// 获取性能信息时当前时间
time: new Date().getTime(),

另外，通过 window.performance.getEntriesByType('resource') 这个方法，我们还可以获取相关资源（js、css、img...）的加载时间，它会返回页面当前所加载的所有资源。

window.performance API 是有缺点的，在 SPA 切换路由时，window.performance.timing 的数据不会更新。所以需要另想办法来统计切换路由到加载完成的时间。拿 Vue 举例，一个可行的办法就是切换路由时，在路由的全局前置守卫 beforeEach 里获取开始时间，在组件的 mounted 钩子里执行 vm.$nextTick 函数来获取组件的渲染完毕时间。

router.beforeEach((to, from, next) => {
 store.commit('setPageLoadedStartTime', new Date())
})

mounted() {
 this.$nextTick(() => {
  this.$store.commit('setPageLoadedTime', new Date() -  this.$store.state.pageLoadedStartTime)
 })
}

Lighthouse性能测评工具

Lighthouse 是Chrome 推出一个开源网站性能测评工具，能够对网页的效果指标进行评测，并给出最佳实践的建议。

它能够生成一个有关页面性能的报告，通过报告我们就可以知道需要采取哪些措施来改进应用的性能和体验。

直接使用Chrome浏览器

浏览器开发者工具 DevTools（F12）自带功能

在高版本（应该是 >= 60）的 Chrome 浏览器中，Lighthouse 已经直接集成到了调试工具 DevTools 中了，因此不需要进行任何安装或下载。

使用npm包lighthouse

通过下载 npm 全局包 lighthouse

npm install -g lighthouse

安装完成后我们就可以直接对某一个网站运行 lighthouse 命令：

lighthouse https://xhr.transsion.com/

默认情况下，会在执行命令的当前目录下生成一个 HTML 文件，直接打开该文件即可查看报告

Lighthouse 命令提供了多个参数，通过参数的配置，能够更灵活地进行测评并输出报告结果。常用的参数有：

lighthouse <url> <options>

lighthouse --help   //输入 --help 选项可以查看可用的输入、输出选项
lighthouse http://www.baidu.com --view   //直接通过浏览器打开HTML报告
lighthouse http://www.baidu.com --output json  //结果以 json 格式文件输出
lighthouse http://www.baidu.com --output json --output-path ./myfile.json   //指定结果文件输出的目录
lighthouse https://baidu.com --output html --output-path ./report.html   //指定结果文件输出的目录

其他参数可参考 lighthouse的文档：https://github.com/GoogleChrome/lighthouse

前端监控方案

• webfunny

• 友盟

• 岳鹰