聊一聊前端的监控

时间  2019-11-08
标签 前端 监控 繁體版
原文   原文链接

今天咱们来聊聊前端的监控html

咱们为何须要前端监控 ？前端

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

前端监控分为三类api

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

性能监控

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

那么如何监测时间呢， 浏览器给咱们提供了一个 API performance
来看看里面都有什么吧
图片描述promise

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

那么咱们来捋一捋网页打开到关闭 都有哪些时间戳记录下来，看一张网页加载流程图
图片描述服务器

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

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

监控页面加载时间

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

图片描述

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

图片描述
运行结果为：
图片描述

而后发送图片到服务器

// 经过_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)
})

图片描述

监控页面资源加载状况

想要监控资源就得获取到__proto__ 上的getEntriesByType('resource')方法
获取到的是个数组 包含了资源请求的时间 名字type 之类的 咱们所作的就是拿区咱们本身须要的东西

图片描述
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();

结果以下
图片描述

错误文件的捕获

主要是经过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

须要值得注意的是
promise 没法用此方法捕获！！ 须要另行监听另外的事件
另外不一样域的js文件不能用此方法捕获详细 具体查看https://www.jianshu.com/p/315...

监测用户行为

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

clipboard.png

clipboard.png

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程