聊一聊前端的监控

小鱼儿 2022-03-08 13:28 323阅读 0赞

今天我们来聊聊前端的监控

我们为什么需要前端监控 ？

**为了获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化方向**

前端监控分为三类

1.  性能项目
2.  数据监控
3.  异常监控

## 性能监控 ##

**- 衡量前端的性能的指标是时间**

那么如何监测时间呢， 浏览器给我们提供了一个 API [performance][]  
来看看里面都有什么吧  
![图片描述][4086359749-5c691ac79f16d_articlex]

它的属性 timing 是一个PerformanceTiming 对象 ， 包含了延迟相关的性能，timing里的属性基本都是成双成对的 都是以**xxxstart --- xxxend** end跟start的时间差就是我们所需要的信息

那么我们来捋一捋网页打开到关闭 都有哪些时间戳记录下来，看一张网页加载流程图  
![图片描述][4015833368-5c691e8cce474_articlex]

首先是navigationStart 就是地址栏开始加载 期间会执行unload 卸载上一个网页的内容 如果有重定向（同域名），就开始重定向。

**fetchStart 抓取开始 页面开始加载**  
**domainLookupStart dns 解析开始**  
**domainLookupEnd dns 解析结束**  
**connectStart tcp 握手开始**  
**connectEnd 建立连接**  
**requestStart 请求页面开始**  
**responseStart 响应开始**  
**responseEnd 响应结束**  
**domloading dom开始加载**  
**domInteractive dom结构树加载完成（src外链资源未完成）**  
**domcontentLoaded（`$(function(){})`）**  
**domComplete dom 加载完毕 外链资源加载完毕**  
**loadevent （`window.onload=function(){}` 里面的代码加载完毕）**

## 监控页面加载时间 ##

那么我们开始写个监控吧 先起一个服务

![图片描述][3827334329-5c69310b9e54b_articlex]

serve.js

let Koa = require('koa')
    let Server = require('koa-static')
    let path = require('path')
    let app = new Koa()
    
    app.use(Server(path.resolve(__dirname)))
    
    app.listen(3000,function(){
        console.log('Server is running on port 3000')
    })

将serve作为静态资源目录 服务起在端口3000

再新建performance.js  
performance.js

// 性能监控
    let time = ()=>{
        let timing = performance.timing
        let data = {
            prevPage: timing.fetchStart  - timing.navigationStart , // 上一个页面卸载到新页面的时间
            redirect: timing.redirectEnd  - timing.redirectStart , // 重定向时长
            dns: timing.domainLookupEnd - timing.domainLookupStart, // dns 解析时长
            tcp: timing.connectEnd - timing.connectStart ,// tcp 链接时长
            respone: timing.responseEnd - timing.requestStart, // 响应时长
            ttfb: timing.responseStart - timing.navigationStart, // 首字节接收到 的时长
            domReady:timing.domInteractive - timing.domLoading, // dom 准备时长
            whiteScreen:timing.domLoading - timing.navigationStart, // 白屏时间
            dom:timing.domComplete - timing.domLoading, // dom解析时间
            load:timing.loadEventEnd - timing.loadEventStart,
            total:timing.loadEventEnd - timing.navigationStart
        }
        return data 
    }
    
    //  因为检测代码在load里执行   所以此时load事件未完成  检测不到load的时间  所以我们需要设置一个定时器来监听load完成
    
    let timeout = (cb)=>{
        let timer;
        let check = ()=>{
            // 加载完毕后才有performance.timing.loadEventEnd
            if(performance.timing.loadEventEnd){
                timer = null 
                cb()
            }else{
                timer = setTimeout(check,100)
            }
        }
        window.addEventListener('load',check,false)
    }
    
    let domReady = (cb)=>{
        let timer;
        let check = ()=>{
            // performance.timing.domInteractive
            if(performance.timing.domInteractive){
                timer = null 
                cb()
            }else{
                timer = setTimeout(check,100)
            }
        }
        window.addEventListener('DOMContentLoaded',check,false)
    }
    
    
    let _performance = {
        init(cb){
            //有可能domloaded 并未加载好 用户就关闭网页了  这种情况也希望监听到
            domReady(()=>{
                let data = time()
                data.type = 'domReady'
                cb(data)
            })
            // dom完全加载完毕
            timeout(()=>{
                let data = time()
                data.type = 'loaded'
                cb(data)
            })
        }
    }
    
    // 通过_performance.init(cb)  获取到监控数据
    
    _performance.init((data)=>{console.log(data)})

html 引入performance.js

![图片描述][2954536823-5c693e9b0bc73_articlex]  
运行结果为：  
![图片描述][3954008144-5c693eb137a58_articlex]

然后发送图片到服务器

// 通过_performance.init(cb)  获取到监控数据
    
    let formatter = (data)=>{
        let arr = []
        for(key in data){
            arr.push(`${key}=${data[key]}`)
        }
        
        return arr.join('&')
    
    }
    _performance.init((data)=>{
        // 然后我们创建一张空图片把数据发给服务器
     
        let img = new Image()
        img.src = '/p.gif?' +   formatter(data)
    })

![图片描述][279684295-5c6946180b001_articlex]

## **监控页面资源加载情况** ##

**想要监控资源就得获取到\_\_proto\_\_ 上的getEntriesByType('resource')方法**  
获取到的是个数组 包含了资源请求的时间 名字type 之类的 我们所做的就是拿区我们自己需要的东西

![图片描述][2507937467-5c69486724a4a_articlex]  
performance.js

//代码省略
      let resource = performance.getEntriesByType('resource')
        let data = resource.map(_=>{
            return {
                name:_.name,
                initatorType:_.initiatorType,
                duration:_.duration
            }
        })
        cb(data)

## ajax请求监控 ##

ajax 请求监控就简单了  
performance.js

// 为了获取到我们所需要的参数  我们改写一下 XMLHttpRequest.prototype.open(method,url,isAsync)
    
    
    let ajax = {
        init(cb){
            let xhr = window.XMLHttpRequest
            // 保存原来的open方法
            let oldOpen = xhr.prototype.open
            console.log(oldOpen)
            xhr.prototype.open = function(method,url,isAsync = true,...args){
              
                this.info = {method,url,isAsync，message:args}
              
                return oldOpen.apply(this,arguments)
            }
            let oldSend =  xhr.prototype.send
            xhr.prototype.send = function(value){
                let start = Date.now()
                let fn = (type) => () =>{
                    this.info.time = Date.now() - start
                    this.info.requestSize = value ? value.length : 0
                    this.info.responeSize = this.responseText.length
                    this.info.type = type
                    cb(this.info)
                }
                this.addEventListener('load',fn('success'),false)
                this.addEventListener('error',fn('error'),false)
                this.addEventListener('abort',fn('abort'),false)
                return oldSend.apply(this,arguments)
            }
        }
    }
    ajax.init((data)=>{
        console.log(data)
    })

index.html

// ajax 请求监控  原生ajax
    
        var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
    
        request.onreadystatechange = function () { // 状态发生变化时，函数被回调
            if (request.readyState === 4) { // 成功完成
                // 判断响应结果:
                if (request.status === 200) {
                    // 成功，通过responseText拿到响应的文本:
                    
                } else {
                    // 失败，根据响应码判断失败原因:
                  
                }
            } else {
                // HTTP请求还在继续...
            }
        }
        
    // 发送请求:
    request.open('GET', '/api/categories',true,'fet');
    request.send();

结果如下  
![图片描述][1143255368-5c6956380d449_articlex]

## 错误文件的捕获 ##

主要是通过window.onerror 事件来捕获  
![clipboard.png][]

let errorCatch = {
        init(cb){
           window.addEventListener('error',function(message, source, lineno, colno, error) {
               this.info = {}
               let stack = error.stack;
               let matchUrl = stack.match(/http:\/\/[^\n]*/)[0]  // 获取报错路径
            
               this.info.filename = matchUrl.match(/http:\/\/(?:\S*)\.js/) ?  matchUrl.match(/http:\/\/(?:\S*)\.js/)[0]:'html' // 获取报错文件；
               let [,row,col] = stack.match(/:(\d+):(\d+)/)  // 获取报错行 列
               this.info  = {
                   message:error.message,
                   name:error.name,
                   filename:this.info.filename,  //有可能是html里的js报错
                   row,
                   col,    // 真实上线的时候  需要source-map 去找到真正的行跟列
               }
               cb(this.info)
            },true) 
        }
    }
    errorCatch.init(data=>{console.dir(data)})

![clipboard.png][clipboard.png 1]

需要值得注意的是  
**promise 无法用此方法捕获！！ 需要另行监听另外的事件**  
**另外不同域的js文件不能用此方法捕获详细 具体查看[https://www.jianshu.com/p/315...][https_www.jianshu.com_p_315...]**

## 监测用户行为 ##

主要方式是在document上监听事件 通过事件委托获取事件对象 封装info 传给后台

![clipboard.png][clipboard.png 2]

![clipboard.png][clipboard.png 3]

综上所诉 大致就是这样 这里只是简单的介绍了下 需要深入了解的小伙伴请自行寻找相关资料， 比如火焰图之类的

[performance]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/performance
[4086359749-5c691ac79f16d_articlex]: /images/20220308/cdb69d0588c94a4ab04bc2430e67a39a.png
[4015833368-5c691e8cce474_articlex]: /images/20220308/13e291323d0744c3aa5d434f1a29508c.png
[3827334329-5c69310b9e54b_articlex]: /images/20220308/fbdb9b3ddf5d4eec9d7462cf3d08c34a.png
[2954536823-5c693e9b0bc73_articlex]: /images/20220308/1a0afb7bd79d4396b1502f8053dfe629.png
[3954008144-5c693eb137a58_articlex]: /images/20220308/7d016224d7924a4397c56d5f2b047d9d.png
[279684295-5c6946180b001_articlex]: /images/20220308/202fc49bf19e4ffba0a1391b90b95f55.png
[2507937467-5c69486724a4a_articlex]: /images/20220308/13d8746ab11b42669ec275f8a142b144.png
[1143255368-5c6956380d449_articlex]: /images/20220308/557883b0ef40412d979ca683ad99e183.png
[clipboard.png]: /images/20220308/19ee15dda6914562a7d2fef3bd6729c3.png
[clipboard.png 1]: /images/20220308/f651b93a04ac400ea78fe58449796010.png
[https_www.jianshu.com_p_315...]: https://www.jianshu.com/p/315ffe6797b8
[clipboard.png 2]: /images/20220308/19a8dd3ad5a747428426365a29376349.png
[clipboard.png 3]: /images/20220308/ef4aa304d0fe46078ab90cf2ad278dd0.png