标签：console 单页 前端 window let 监控 router 上报 监听

原文链接：https://www.cnblogs.com/yalong/p/15954026.html

背景

公司有大量单页应用的项目，有的年代久远，想把一些不用的项目下掉，或者把使用频率很低的工具进行功能重组，避免占用大量人力去维护众多项目；
但是不知道这些系统是否有人，以及有多少人在用，以及哪些页面使用频率最高；
所以需要统计项目的pv,uv

需求分析

1. 由于单页应用的路由跟后端没有交互，所以后端无法统计到具体的pv，最多统计个uv,所以前端实现比较合适
2. 由于系统很多，而且vue, react都有，关键版本也不一致，所以设计方案要兼容多框架，多版本
3. 还是由于系统太多，所以要尽量减少对现有代码的侵入，降低接入成本
4. 既然要实现统计pv,uv，那么能不能统计多一点的数据，比如首屏加载耗时，异常信息等
5. 那么就搞一套适合当下的前端监控吧

监控系统数据采集功能拆解

前端监控的核心是采集相关数据，然后才上报，这里只说数据的采集

一.采集首屏加载相关数据

首屏加载性能指标如下：

1. DNS 解析耗时: domainLookupEnd - domainLookupStart
2. TCP 连接耗时: connectEnd - connectStart
3. SSL 安全连接耗时: connectEnd - secureConnectionStart
4. 网络请求耗时 (TTFB): responseStart - requestStart
5. 数据传输耗时: responseEnd - responseStart
6. DOM 解析耗时: domInteractive - responseEnd
7. 资源加载耗时: loadEventStart - domContentLoadedEventEnd
8. First Byte时间: responseStart - domainLookupStart
9. 白屏时间: responseEnd - fetchStart
10. 首次可交互时间: domInteractive - fetchStart
11. DOM Ready 时间: domContentLoadEventEnd - fetchStart
12. 页面完全加载时间: loadEventStart - fetchStart
13. http 头部大小： transferSize - encodedBodySize
14. 重定向次数：performance.navigation.redirectCount
15. 重定向耗时: redirectEnd - redirectStart

这么多指标我们选择三个指标，代码如下：

let fn = () => {  let timing = performance.getEntriesByType('navigation')[0]  let TTI = timing.domInteractive - timing.fetchStart; // 首次可交互时间  let L = timing.loadEventStart - timing.fetchStart; // 页面完全加载时间  let FP = timing.responseEnd - timing.fetchStart; // 白屏时间  let obj = {    TTI, L, FP  }  console.log(obj)}window.addEventListener('load', fn)

其他指标获取方式相同

二.采集pv uv

问题分析

采集PV UV的核心是监听浏览器路由变化，这就不得不提到vue-router 跟react-router了

在每个项目中是可以专门写各自的router监听，但是成本太高，代码侵入太强，而且不同框架，不同版本写法还不一样
所以就不准备使用框架本身的router，用原生js写一套统一路由监听多好，这样就不得不先了解下vue-router 跟react-router的实现原理了

vue-router react-router实现原理

这俩的实现原理网上有很详细的说明，有需要可自行百度，这里就简单说下:

以vue-router为例，router有两种模式: hash模式 和 history模式

hash模式就是改变hash，通过 hashchange 可以监听hash改变

history模式就是正常的url地址，通过history.replaceState history.pushState 实现

MDN上说 replaceState 和 pushState 会触发 popState，但是亲测，触发不了，要想监听这俩方法，只能监听方法本身，也就是 window.addEventListener('replaceState', historyFn);

同时不管哪种模式下都可以通过 history.go/back/forward 以及浏览器的前进后退来改变浏览器的url

浏览器前进后退操作、history.go/back/forward调用、hashchange的时候触发popState

总结

要想监听浏览器的url变化，只需监听如下

   window.addEventListener('hashchange', hashFn);   window.addEventListener('replaceState', historyFn);   window.addEventListener('pushState', historyFn);   window.addEventListener('popstate', historyFn);

这样就囊括了 hash变化，replaceState，pushState， 浏览器前进后退，history.go/back/forward；

但是hash改变的时候，会同时触发 hashChange 和 popState,
可以通过一个公共变量，hashFn、historyFn 每次执行都给这个变量temp赋值，在触发数据上报的时候，判断下，如果temp变量的值 跟现在的url地址是一样的，就代表已经上报了该url的数据了，阻止当前上报行为即可

代码如下：

let tempUrl = ''let historyFn = (e) => {  let href = e.currentTarget.location.href  if (tempUrl === href) { // 已经触发过了    return false  } else { // 没有触发过，就赋值    tempUrl = href  }  console.log('history change')}let hashFn = (e) => {  let href = e.newURL  if (tempUrl === href) {    return false  } else {    tempUrl = href  }    console.log('hash change')}window.addEventListener('hashchange', hashFn);window.addEventListener('replaceState', historyFn);window.addEventListener('pushState', historyFn);window.addEventListener('popstate', historyFn);

三.采集异常报错

异常数据捕获其实还是挺复杂的，因 湖南干部培训 http://hunan.ganxun.cn/ 为上线以后，代码都是编译压缩后的代码，而且vue、react 框架本身也会对异常进行捕获并进行console.error

调研过sentry，这个工具挺好的，但是接入成本比较高，结合当前状态，那么就退而求其次，监听console.error不就行了吗，不要求看解压后的详细代码，就看个异常输出就行，对于啥内存泄漏，页面崩溃，这些就不需要了。

具体代码如下：

const monitorErrorInitFn = () => {  /**   * console.error 打印的错误，就是要处理上报的信息   */  const oldErrorLog = console.error;  console.error = null // 这一步是避免重复添加  console.error = function(str) {    oldErrorLog(str)    console.log('看我，我监听了 error 输出')  }}monitorErrorInitFn()

这样做是比较草率的，如果需要详细的报错信息可以考虑接入sentry 或者其他成熟的工具

项目整体设计

目前为止，数据搜集已经做到了，那么如何让开发者方便，快捷的接入使用呢？
步骤如下：

1.首先监控系统有个自己的管理后台，用户在监控后台填写要接入的项目名称，项目线上域名，用户信息存放的位置，然后系统把这些数据保存在数据库中并生成唯一id

2.把的数据搜集工具封装成一个npm包，名字就叫u-spa吧，这个npm包对外暴露一个方法，并把id作为参数穿传进来

3.u-spa，初始化的时候，通过id向后端发送请求，获取用户填写的信息，包括系统名称，线上域名，用户信息存放位置，并把这些数据存放在 localStorage 中

4.触发数据上报的时候，就可以把需要采集的数据，并结合localStorage 中的网站信息，获取当前用户名，并限制在当前域名下，一起上报到后端，over

ps：
1.填写线上域名的原因是只处理线上的数据采集，本地、测试环境就不用采集和上报了

2.填写用户信息存放的位置(可以在 localStorage中，也可以在 cookie中)，是为了明确知道当前用户是谁，如果接入的系统本身没有存储用户信息，那么在npm初始化请求的时候，后端可以生成一个唯一的 userId，并存放在redis中，设限24小时过期时间，以此 userId 作为用户信息的标识，不过这种情况下，只能统计当天的pu、uv，比如用户第一天使用了，第二天没使用，那么第三天生成的 userId 就跟之前的不一样了，这样统计n天之内的数据就不太准确了，所以还是建议上报真实的用户名或者邮箱

u-spa

u-spa 就是咱们封装的收集数据并上报的工具
代码地址： https://github.com/YalongYan/u-spa

安装如下

npm i u-spa -S

使用如下

import uSpa from 'u-spa'uSpa(id)

就是在入口文件里添加上面两行代码就可以了，id就是在监控后台填写完网站信息，生成的id
现在只是在触发上报的是，console出了上报信息，真实使用还需要搭配上传数据接口。

特性

1.采集页面首次加载的性能指标，并上报
2.监听url改变，并上报数据，包括首页也会触发上报
3.监听console.error 并上报打印的数据
4.接入方便，只需两行代码
5.无技术壁垒，不管是vue 还是 react都可以支持
6.其实u-spa 不只是限制在单页应用上使用，多页应用也是可以用的

总结

其实前端监控，需要监控，以及可以监控的数据，还有很多

比如可以统计页面的访问时长、记录页面点击区域并生成点击热力图、统计按钮级别的点击事件等等

需要从实际需求出发， 满足业务需求才是第一位

本文只说数据的采集，其实搭配还需要有后端服务，对数据的接受，以及把这些数据通过图标等形式展示出来，这样才是一个完整的监控系统

参考地址：

理解浏览器历史记录

如何做前端异常监控？

友盟的监控工具

标签：console,单页,前端,window,let,监控,router,上报,监听
来源： https://blog.csdn.net/cmdos/article/details/123227112

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。