页面监控
一、监控页面的性能
监控页面的性能次要是根据 performance 对象,
performace 的具体介绍:https://www.cnblogs.com/bldxh/p/6857324.html
timing 对象: 从输出 url 到用户能够应用页面的全过程工夫统计,如下图:
具体实现形式如下:
- 做值的时间差进行上报。
- 通过开启定时器,查看 timing.loadEventEnd 是否有值,来判断页面是否加载实现;
或者是查看 timing.domContentLoadedEventEnd 是否有值,来判断 DOM 是否加载实现, 用来统计用户只是关上了页面,然而此时的图片等资源还没有加载。
- 通过创立 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;})
二、监控页面动态资源的加载
获取页面中引入的资源文件,能够通过以下两种形式:
- 通过 performance 的办法 getEntriesByType(‘resource’),获取引入的资源列表;
- 定义一个性能监控对象 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
实现形式如下:
- 重写 XMLHttpRequest 对象的 open,send 办法,解决须要上报的数据;
- 监听 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 办法进行监控,有以下两种形式:
- window.onerror 只会监听到页面的 js 谬误;
- 应用 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);
})