页面监控

页面监控

一、监控页面的性能

监控页面的性能主要是依据performance对象，

performace的详细介绍：https://www.cnblogs.com/bldxh/p/6857324.html

timing对象:从输入url到用户可以使用页面的全过程时间统计，如下图：

具体实现方式如下：

1. 做值的时间差进行上报。
2. 通过开启定时器，检查timing.loadEventEnd是否有值，来判断页面是否加载完成；

或者是检查timing.domContentLoadedEventEnd是否有值，来判断DOM是否加载完成,用来统计用户只是打开了页面，但是此时的图片等资源还没有加载。

1. 通过创建 new Image()进行src赋值，进行上报统计。

监控代码如下：

// 监控网页性能 performance API
export default {
    init(cb) {
        // 上报load加载完成
        this.load(() => {
            let data = this.processData(performance.timing);
            data.type = 'loaded';
            cb(this.formatData(data));
        });
        // 上报dom 加载完成，eg:统计用户打开页面，图片还没有加载完成，就关闭页面
        this.domReady(() => {
            let data = this.processData(performance.timing);
            data.type = 'domReady';
            cb(this.formatData(data));
        })
    },
    processData(p) {
        let data = {
            prevPage: p.fetchStart - p.navigationStart, // 上一个页面到这个页面的时长
            redirect: p.redirectEnd - p.redirectStart, // 重定向的时长
            dns: p.domainLookupEnd - p.domainLookupStart, // dns解析的时长
            connect: p.connectEnd - p.connectStart, // tcp连接的时长

            send: p.responseEnd - p.requestStart, // 响应结束到请求结束
            ttfb: p.responseStart - p.navigationStart, // 首字节接收到的时长

            whiteScreen: p.domLoading - p.navigationStart, // 白屏时间
            dom: p.domComplete - p.domInteractive, // dom解析时间
            load: p.loadEventEnd - p.loadEventStart,//onload的执行时间
            domReady: p.domContentLoadedEventEnd - p.navigationStart,//domReady时间(用户可操作时间节点) 
            total: p.loadEventEnd - p.navigationStart,//总时间
        }
        return data;
    },
    // load完成
    load(cb) {
        let timer;
        // 通过定时器，检查页面是否加载完成
        let check = () => {
            if (performance.timing.loadEventEnd) {
                clearInterval(timer);
                cb();
            } else {
                timer = setInterval(check, 1000);
            }
        }
        window.addEventListener('load', check);
    },
    // domReady,dom加载完成
    domReady(cb) {
        let timer;
        // 通过定时器，检查页面dom是否加载完
        let check = () => {
            if (performance.timing.domContentLoadedEventEnd) {
                clearInterval(timer);
                cb();
            } else {
                timer = setInterval(check, 1000);
            }
        }
        window.addEventListener('DOMContentLoaded', check);
    },
    // 解析data eg:{a:1,b:2} => a=1&b=2
    formatData(data) {
        let arr = [];
        for (let item in data) {
            arr.push(`${item}=${data[item]}`);
        }
        return arr.join('&');
    }

}

应用：

import performance from './performance'

performance.init((data) => {
    console.log(data);
    new Image().src = 'performance.jpg?' + data;
})

二、监控页面静态资源的加载

获取页面中引入的资源文件，可以通过以下两种方式：

1. 通过performance的方法getEntriesByType('resource')，获取引入的资源列表；
2. 定义一个性能监控对象new PerformanceObserver(),调用对象的observe方法进行监控；

具体代码如下：

// 监控页面静态资源的加载情况
export default {
    init(cb){
        if(window.PerformanceObserver){
            // 过滤自身的js: /bundle.js
            let observer = new PerformanceObserver((list, obj)=> {
                let entries = list.getEntries();
                cb(this.processData(entries[0]));
            });
            observer.observe({entryTypes: ["resource"]});
        }else{
            window.onload = ()=>{
                let data = this.processData(performance.getEntriesByType('resource'));
                cb(data);
            }
        }
    },
    // 上报数据处理
    processData(arrResource){
        let arr = [];
        for(let item of arrResource){
            arr.push({
                name:item.name,//文件名称
                initiatorType: item.initiatorType,//文件类型 script，link
                duration: item.duration,//加载时间
            })
        }
        return arr;
    }
}

引用：

import resource from './resource'

resource.init((data) => {
    console.log(data);
})

三、 监控ajax

实现方式如下：

1. 重写XMLHttpRequest对象的open，send 方法，处理需要上报的数据；
2. 监听xhr对象的load,error,abort方法。

代码如下：

//  监控ajax
export default ({
    init(cb) {
        let xhr = window.XMLHttpRequest;
        let oldOpen = xhr.prototype.open;
        xhr.prototype.open = function (method, url, async, username, password) {
            this.info = {
                method, url, async, username, password
            }
            return oldOpen.apply(this, arguments)
        }
        let oldSend = xhr.prototype.send;
        xhr.prototype.send = function (value) {
            let startTime = Date.now();
            let fn = (type) => () => {
                this.info.requestTime = Date.now() - startTime;
                this.info.requestSize = value ? value.length : 0;
                this.info.responseText = this.responseText;
                this.info.responseSize = this.responseText.length;

                this.info.type = type;
                cb(this.info);
            }
            this.addEventListener('load', fn('load'), false);
            this.addEventListener('error', fn('error'), false);
            this.addEventListener('abort', fn('abort'), false);//终止请求

            return oldSend.apply(this, arguments)
        }

    }
})

应用：

import xhr from './xhr'

xhr.init((data) => {
    console.log(data);
})

四、监控页面的错误

页面的错误捕获主要是用onerror方法进行监控，有以下两种方式：

1. window.onerror只会监听到页面的js错误；
2. 使用addEventListener方法，利用事件捕获，可以监听到资源的引用错误 css,img,js；

代码如下：

// 页面的错误捕获
export default {
    init(cb) {
        window.onerror = function (message, source, lineno, colno, error) {
            let info = {
                message: error.message,
                name: error.name
            };
            let stack = error.stack;
            let matchUrl = stack.match(/http:\/\/[^\n]*/)[0];
            console.log(matchUrl)
            info.url = matchUrl;
            // info.filename = matchUrl.match(/http:\/\/(?:\S*)\.js/)[0];
            // console.log(info.filename)
            let [, row, colume] = matchUrl.match(/:(\d+):(\d+)/);
            info.row = row;
            info.colume = colume; // 上线的时候代码会压缩 source-map 找到对应的真实的报错
            cb(info);
        }
        // 使用error的捕获，会监听到资源的引用错误 css,img,js
        window.addEventListener('error', function(e){
            console.log(11,e);
        }, true);
    }

}

应用：

import errCatch from './errCatch'

errCatch.init((data) => {
    console.log(data);
})