前端监控和埋点能做什么
let timing = performance.timing, start = timing.navigationStart, dnsTime = 0, tcpTime = 0, firstPaintTime = 0, domRenderTime = 0, loadTime = 0; //DNS解析时间 dnsTime = timing.domainLookupEnd - timing.domainLookupStart; //TCP建立时间 tcpTime = timing.connectEnd - timing.connectStart; //首屏时间 firstPaintTime = timing.responseStart - start; //dom渲染完成时间 domRenderTime = timing.domContentLoadedEventEnd - start; //页面onload时间 loadTime = timing.loadEventEnd - start;
| 域名( domain ) | javascript | document.domain ;获取的值如:"domain" : "127.0.0.1" |
| URL (url) | javascript | document.URL;获取的值如:"url" : "http://127.0.0.1:3000/" |
| 页面标题 (title) | javascript | document.title;获取的值如:"title" : "Express"; |
| 上一跳url、referrer (referrer) | javascript | document.referrer;获取的值如:"referrer" : "" ; |
| 分辨率 (height:sh; width: sw) | javascript | window.screen.height & width; 获取的值如:"sh" : "1050" ,"sw" : "1680"; |
| 颜色深度 (cd) | javascript | window.screen.colorDepth; 获取的值如:"cd" : "32"; |
| 客户端语言 (lang) | javascript | navigator.language;获取的值如:"lang" : "zh-CN"; |
| user-agent header(userAgent) | javascript | navigator.userAgent;获取的值如:"userAgent" : "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36"; |
现有的前端埋点方案总结
SDK就会自动追踪页面上的按钮(a、button、input) 这种html标签类型的点击情况,一旦页面某一个按钮发生了点击行为,SDK就会去采集此按钮的一些信息,例如: 这个按钮的标签类型,这个按钮的文本内容,这个按钮的name,这个按钮的id、class名,还有一些按钮特有的属性如href等。
比如click事件,在document上绑定click,在事件中的捕获阶段进行绑定,即使按钮元素取消冒泡了,也跟不会影响捕获阶段的传递(在页面中点击一个元素,事件是从这个元素的祖先元素中逐层传递下来的,这个阶段为事件的捕获阶段。当事件传递到这个元素之后,又会把事件逐成传递回去,直到根元素为止,这个阶段是事件的冒泡阶段 )
事件标识?怎么唯一定位到某个页面的元素,设定一个根节点,根节点到这个元素自顶向下的属性名
缺点:dom结构可能会变,class 名字, 元素嵌套,很难唯一定位到
在不同场景下我们需要选择不同的埋点方案。例如对于简单的用户行为类事件,可以使用全埋点解决;而对于需要携带大量运行时才可获知的业务字段的埋点需求,就需要声明式埋点来解决。从更高的层面来看
思考前端路由前端路由通过'#’锚点,其本来加在URL中指示网页的位置的,hash虽然出现在URL中,但不会被包括在HTTP请求中。它是用来指导浏览器动作的,对服务器端完全无用,因此,改变hash不会重新加载页面。
改写history.replaceState
数据上传方式
参考免费开源的前端监控平台(github):https://github.com/kisslove/web-monitoring
|
|