页面监控1.监控页面性能监控页面性能主要是基于性能对象，性能的详细介绍：https://www.cnblogs.com/bldxh/p/6857324.htmltiming对象：来自inputurl到用户可以使用页面的整个过程的时间统计，如下图所示：具体实现方法如下：上报值之间的时间差。通过启动定时器，检查timing.loadEventEnd是否有值来判断页面是否已经加载；或者查看timing.domContentLoadedEventEnd是否有值判断DOM是否已经加载。用于统计用户是否刚打开页面，但此时图片等资源还没有加载。通过创建newImage()来分配src和报告统计信息。监控代码如下：//监控网页性能APIexportdefault{init(cb){//报告加载完成this.load(()=>{letdata=this.processData(performance.timing);data.type='loaded';cb(this.formatData(data));});//报告dom加载完成，eg：统计打开页面的用户，但是图片还没有加载，关闭页面this.domReady(()=>{letdata=this.processData(performance.timing);data.type='domReady';cb(this.formatData(data));})},processData(p){letdata={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,//domReadytime(用户可操作时间节点)total:p.loadEventEnd-p.navigationStart,//总时间}返回数据；},//加载完成load(cb){lettimer;//通过定时器检查页面是否加载letcheck=()=>{if(performance.timing.loadEventEnd){clearInterval(timer);cb();}else{timer=setInterval(check,1000);}}window.addEventListener('加载',检查);},//domReady，dom加载完成domReady(cb){lettimer;//通过定时器，检查页面dom是否加载letcheck=()=>{if(performance.timing.domContentLoadedEventEnd){clearInterval(timer);cb();}别的{计时器=setInterval(检查,1000);}}window.addEventListener('DOMContentLoaded',检查);},//解析数据eg:{a:1,b:2}=>a=1&b=2formatData(data){letarr=[];for(letitemindata){arr.push(`${item}=${data[item]}`);}返回arr.join('&');}}Apply:importperformancefrom'./performance'performance.init((data)=>{console.log(data);newImage().src='performance.jpg?'+data;})二、监控页面的静态资源加载和获取页面引入的资源文件可以通过以下两种方式完成：通过性能方法getEntriesByType('resource')，获取引入的资源列表；定义一个性能监控对象newPerformanceObserver()，调用对象的observe方法进行监控；具体代码如下：//监听页面加载静态资源exportdefault{init(cb){if(window.PerformanceObserver){//过滤自己的js:/bundle.jsletobserver=newPerformanceObserver((list,obj)=>{letentries=list.getEntries();cb(this.processData(entries[0]));});观察者.observe({entryTypes:["resource"]});}else{window.onload=()=>{letdata=this.processData(performance.getEntriesByType('resource'));cb（数据）；}}},//报表数据处理processData(arrResource){letarr=[];for(letitemofarrResource){arr.push({name:item.name,//文件名initiatorType:item.initiatorType,//文件类型script,linkduration:item.duration,//加载时间})}return啊;}}参考：importresourcefrom'./resource'resource.init((data)=>{console.log(data);})3、监控ajax实现如下：重写open和send方法XMLHttpRequest对象处理需要上报的数据；监控xhr对象的load、error和abort方法代码如下：//监控ajaxexportdefault({init(cb){letxhr=window.XMLHttpRequest;letoldOpen=xhr.prototype.open;xhr.prototype.open=function(method,url,async,username,password){this.info={method,url,async,username,password}returnoldOpen.apply(this,arguments)}letoldSend=xhr.prototype.send;xhr.prototype.send=function(value){letstartTime=Date.now();letfn=(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('呃ror',fn('错误'),false);this.addEventListener('abort',fn('abort'),false);//终止请求returnoldSend.apply(this,arguments)}}})Application:importxhrfrom'./xhr'xhr.init((data)=>{console.log(data);})四、监控页面错误页面的错误捕获主要是通过onerror方法进行监控，有两种方式：window.onerror只会监听js页面错误；使用addEventListener方法使用事件捕获监听资源引用错误css、img、js；代码如下：//页面错误捕获exportdefault{init(cb){window.onerror=function(message,source,lineno,colno,error){letinfo={message:error.message,name:error.姓名};让stack=error.stack;让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+)/);信息.row=行；info.colume=colume;//上线时，代码会压缩source-map，找到对应的真实错误cb(info);}//使用错误捕获，它会监控资源引用错误css,img,jswindow.addEventListener('error',function(e){console.log(11,e);},true);}}应用程序：从'./errCatch'导入errCatcherrCatch.init((data)=>{console.log(data);})
