摘要:今天我们来聊聊前端的监控我们为什么需要前端监控为了获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,指明产品优化方向前端监控分为三类性能项目数据监控异常监控性能监控衡量前端的性能的指标是时间那么如何监测时间呢,浏览器给我们提
今天我们来聊聊前端的监控
我们为什么需要前端监控 ?
为了获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,指明产品优化方向
前端监控分为三类
性能项目
数据监控
异常监控
性能监控- 衡量前端的性能的指标是时间
那么如何监测时间呢, 浏览器给我们提供了一个 API performance
来看看里面都有什么吧
它的属性 timing 是一个PerformanceTiming 对象 , 包含了延迟相关的性能,timing里的属性基本都是成双成对的 都是以xxxstart --- xxxend end跟start的时间差就是我们所需要的信息
那么我们来捋一捋网页打开到关闭 都有哪些时间戳记录下来,看一张网页加载流程图
首先是navigationStart 就是地址栏开始加载 期间会执行unload 卸载上一个网页的内容 如果有重定向(同域名),就开始重定向。
fetchStart 抓取开始 页面开始加载
domainLookupStart dns 解析开始
domainLookupEnd dns 解析结束
connectStart tcp 握手开始
connectEnd 建立连接
requestStart 请求页面开始
responseStart 响应开始
responseEnd 响应结束
domloading dom开始加载
domInteractive dom结构树加载完成(src外链资源未完成)
domcontentLoaded($(function(){}))
domComplete dom 加载完毕 外链资源加载完毕
loadevent (window.onload=function(){} 里面的代码加载完毕)
那么我们开始写个监控吧 先起一个服务
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 事件来捕获
let errorCatch = { init(cb){ window.addEventListener("error",function(message, source, lineno, colno, error) { this.info = {} let stack = error.stack; let matchUrl = stack.match(/http://[^ ]*/)[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)})
需要值得注意的是
promise 无法用此方法捕获!! 需要另行监听另外的事件
另外不同域的js文件不能用此方法捕获详细 具体查看https://www.jianshu.com/p/315...
主要方式是在document上监听事件 通过事件委托获取事件对象 封装info 传给后台
综上所诉 大致就是这样 这里只是简单的介绍了下 需要深入了解的小伙伴请自行寻找相关资料, 比如火焰图之类的
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101777.html
摘要:性能统计有助于帮我们检测网站的用户体验。这样,我们就轻轻松松的统计到了首屏时间。下一章,我们将继续聊聊百度移动版首页那些事。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): https://segmentfault.com/blog/frontenddriver 上一篇文章我们讨论了,如何进行前端日志打点统计: https://segm...
摘要:性能统计有助于帮我们检测网站的用户体验。这样,我们就轻轻松松的统计到了首屏时间。下一章,我们将继续聊聊百度移动版首页那些事。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): https://segmentfault.com/blog/frontenddriver 上一篇文章我们讨论了,如何进行前端日志打点统计: https://segm...
摘要:所以今天,就和大家一起聊一聊前端的安全那些事儿。我们就聊一聊前端工程师们需要注意的那些安全知识。殊不知,这不仅仅是违反了的标准而已,也同样会被黑客所利用。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):https://segmentfault.com/blog... 随着互联网的发达,各种WEB应用也变得越来越复杂,满足了用户的各种需求...
摘要:欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用,的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板。我们今天就来聊聊,拼装与渲染模板的那些事儿。一改俱改,一板两用。 欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):https://segmentfault.com/blog...
阅读 807·2021-11-25 09:43
阅读 1671·2021-09-29 09:42
阅读 1892·2019-08-30 15:55
阅读 3412·2019-08-30 15:54
阅读 2616·2019-08-30 13:20
阅读 3500·2019-08-29 13:25
阅读 906·2019-08-28 18:03
阅读 1776·2019-08-26 13:44