这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
2.在网页中植入对应的js代码
//进入
document.addEventListener(DOMContentLoaded,function(){
...
let args = {
ua: navigator.userAgent,
os: navigator.platform,
width: document.body.clientWidth || document.documentElement.clientWidth,
height: document.body.clientHeight || document.documentElement.clientHeight,
project_id: md5(abcd),
user_uni_id: 临时分配给用户唯一的id,
url: window.location.href,
current_enter_time: new Date().getTime()
....
};
let img = new Image();
img.onload = function() {
img = null;
};
img.src= `?args=${qs(args)}`;
});
//离开
window.onbeforeunload = function() {
...
let args = {
...
leave_time: new Date().getTime()
....
};
let img = new Image();
img.onload = function() {
img = null;
};
img.src= `?args=${qs(args)}`;
}
收集数据并上报
const fs = require(fs);
route.get(/bury.gif,async (ctx)=>{
let queryStr = ctx.querystring;
let d = new Date();
let year = d.getFullYear();
let month = d.getMonth()+1;
let day = d.getDate()+1;
fs.writeFile(`../logs/${year}-${month}-${day}.log`,queryStr,{flag:a,encoding:utf-8,mode:0666},function(e){});
ctx.status = 200;
ctx.type = image/gif;
ctx.body = {};
});
简单的设想方案是先把数据收集到文本文件里 ，然后定时的分析这些文本文件 ，然后把筛选后的放到数据库中 。
2.网页性能收集
网页性能主要是收集是输入url地址到网页请求完成资源下载完成这段时间范围内一些请求 、加载等指标 。
比如举几个简单的指标：
首屏加载时长
HTML 文档被加载和解析完成
网页加载完成时间
白屏时间
其他…
具体实现方案（一）：
//index.html
<html>
<head>
<script>
window.startTime = Date.now();
</script>
</head>
<body>
<script>
let diff = Date.now()-window.startTime;
console.log(白屏时长+diff);
document.addEventListener(DOMContentLoaded,()=>{
console.log(HTML 文档被加载和解析完成时间+Date.now()-window.startTime);
});
window.onload = function() {
console.log(网页加载完成时间+Date.now()-window.startTime);
};
</script>
<script src="https://www.cnblogs.com/smileZAZ/archive/2023/01/11/a.js"></script>
<script src="https://www.cnblogs.com/smileZAZ/archive/2023/01/11/b.js"></script>
....
</body>
</html>
使用performance API
Performance是W3C性能小组引入进来的一个新的API ，他可以很好的获取到首屏加载时间 、白屏时间 、dns查询时间等 ，是一个很方便的获取网页性能指标的API,而且目前大部分主流浏览器是支持的 。
https://www.caniuse.com/
let timing = window.performance.timing
//白屏时间
timing.responseStart - timing.navigationStart
//DNS 查询时长
timing.domainLookupEnd - timing.domainLookupStart
//request请求耗时
timing.responseEnd - timing.responseStart
//HTML 文档被加载和解析完成耗时
timing.domComplete - timing.domInteractive
//网页加载完成耗时
timing.loadEventEnd - timing.navigationStart
//重定向耗时
timing.redirectEnd - timing.redirectStart;
//占用的内存
window.performance.memory.usedJSHeapSize；
2.此外还有一些高级用法 ，比如可以收集一些请求和静态资源的请求时间
let time = [];
let entryLists = window.performance.getEntries();
for(let i=0;i<entryLists.length;i++) {
let item = entryLists[i];
let obj = {};
let soureTypes = [script,css,xmlhttprequest,link,img];
if(soureTypes.indexOf(item.initiatorType)>=0){
obj.name = item.name;
//请求时间
obj.reqTime = item.responseEnd - item.responseStart;
time.push(obj);
}
}
3.关于Performance的更多用法可以参考:
https://www.jianshu.com/p/1355232d525a
https://blog.csdn.net/hb_zhouyj/article/details/89888646
4.收集数据上报
收集上报数据 ，使用koa2创建接口performance.gif
const fs = require(fs);
route.get(/performance.gif,async (ctx)=>{
let queryStr = ctx.querystring;
let d = new Date();
let year = d.getFullYear();
let month = d.getMonth()+1;
let day = d.getDate()+1;
fs.writeFile(`../performance-logs/${year}-${month}-${day}.log`,queryStr,{flag:a,encoding:utf-8,mode:0666},function(e){});
ctx.status = 200;
ctx.type = image/gif;
ctx.body = {};
});
3.错误收集和监控
错误收集主要就是针对js报错 、静态资源加载等出错信息进行收集 。
收集js报错最先想到的可能是try catch 。
try {
console.log(b);
} catch(e) {
console.log(e);
sendErrorReq();
};
但是使用使用的话 ，每个页面收集错误都要充斥这try catch ，这样其实是不太好的 。
而且catch似乎没办法捕获到异步的操作 。
try {
setTimeout(()=>{
console.log(b);
})
} catch(e) {
console.log(e);
sendErrorReq();
};
试了一下没有执行到catch里边的sendErrorReq函数 。
使用try catch是一种局部错误监听方式 。
用window.onerror或者是window.addEventListener(‘error’）
window.onerror
/**
*msg 错误信息
*url 错误所在的页面地址
*row 错误所在的行数
*col 错误所在的列数
**/
window.onerror = function(msg,url,row,col) {
console.log(msg,url,row,col, error);
};
b();
使用window.onerror可以检测到js的报错 ，但是没法监听静态资源加载失败的情况 。
<img src="https://www.cnblogs.com/smileZAZ/archive/2023/01/11/%E4%B8%80%E4%B8%AA%E4%B8%8D%E5%AD%98%E5%9C%A8%E7%9A%84%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80" alt="">
window.addEventListener(‘error’)
window.addEventListener(‘error’)能够监听到静态资源加载出错
window.addEventListener(error,(e)=>{
let localName = e.srcElement.localName;
let currentSrc = e.srcElement.currentSrc;
if(localName==img) {
console.log(`图片${currentSrc}加载失败了`);
sendErrorData(currentSrc);
}
...
// e.preventDefault();
},true);
必须设为捕获过程中执行 ，否则依然无法监听 。
3. promise错误的收集
new Promise((resolve,reject)=>{
reject(hi);
}).catch(e=>{
console.log(e);
sendErrorData(e)
});
axios.get(...).catch(e=>{
console.log(e);
sendErrorData(e)
})
但是有种情况 ，如果promise不加catch的话 ，
没法通过window.onerror去监听 ，但是还是通过监听unhandledrejection事件去收集的
4.unhandledrejection
window.addEventListener(unhandledrejection, event => {
console.log(error:+event.reason);
sendErrorData(event.reason);
});
new Promise((resolve,reject)=>{
reject(hi);
});
在看下在vue中收集报错 ，以vue-cli3创建的项目进行演示
测试了一下window.onerror这种方式 无法监听错误的 。
在网上找了下原因
可以看到在vue的源码里 ，因为如果没有定义errorHandler就会走到logError这个方法 ，所以没法使用window.onerror进行监听 。
5.errorHandler
在vue的手册中 ，推荐监听vue报错的可以使用errorHandler这个配置方法 。
//main.js
Vue.config.errorHandler = function (err, vm, info) {
console.log(错误是:, err)
sendErrorData(err);
}
然后随便故意写错
mounted() {
a();
}
就能收集到报错信息了
当然最后把收集的错误上报给服务器 ，创建一个接口error.gif 。
const fs = require(fs);
route.get(/error.gif,async (ctx)=>{
let queryStr = ctx.querystring;
....
fs.writeFile(`../error-logs/${year}-${month}-${day}.log`,queryStr,{flag:a,encoding:utf-8,mode:0666},function(e){});
ctx.status = 200;
ctx.type = image/gif;
...
});
本文转载于：
http://events.jianshu.io/p/a6572eb10e00
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
