1、大 前 端 时 代 前 端 监 控 的 最 佳 实 践“OUTLINE010203大前端时代前端监控新的变化前端监控的最佳实践阿里云ARMS前端监控系统架构大前端时代前端监控新的变化01“大前端时代有哪些变化？SPAMVVM/工程化跨端全栈大前端时代有哪些变化？“传统监控模式能否适用于新的技术？比如PV统计SPA模式下首屏如何计算？跨端开发给监控带来什么挑战？前端监控的上报模式在Node.js端是否合理？前端变化给监控带来了什么样的改变？“SPA模式下的PV统计问题SPA技术升级，体验升级，PV下降？“导致PV下降的原因和解法原因页内路由替代了请求新的页面 解法哈希路由：监听hash chan

2、ge变化上报PV 非哈希路由：轻量hack pushState和replaceState“完美了吗？“思考案例下拉刷新 滚屏分页加载 阿里云邮后台一直开着，每周上百次查看 未关闭的浏览器Tab几小时后再次浏览 查找信息时，浏览器Tab之间快速切换“首屏统计问题旺铺点击率和首屏时间的关系点击率(%)8182838485首屏时间(s)12345678“第一阶段：自定义打点时期页头和首屏dom处分别通过new Date()打点“第二阶段：W3C标准时期“第三阶段：SPA盛行导致w3c标准失去原来的意义load时间 1106ms首屏时间 1976ms“现阶段 用户感官指标FMPFMP=主要内容可见时间

3、“猜想主要内容=元素增量最大的点“验证猜想 飞猪案例414ms639ms“猜想成立“验证猜想 手淘案例227ms483ms959ms“猜想不成立“元素是否可见 每个元素对页面的影响是否等效？权重什么原因导致猜想不成立？“首屏计算方式Dom loadingInit MutationObserverDom renderingAsync requestDom renderingClose ObserverLoad EventMutation callbackCalc mutation scorePush to arrayScore rankingTime of FMPMutationObserver

4、score_delta=0Visiblescore_delta+=1*depthYscore=score_pre+score_deltaNdepth firstrear sibling firstnodesadded“验证 手淘案例307ms512ms791ms“验证通过“下一阶段前端监控的最佳实践02“要是XXX就好了 要是能有双眼睛帮我盯着发版就好了 要是能在第一时间发现错误就好了开发人员的诉求“双十一主动告警案例“直达现场“监控告警错误定位解决配置告警规则主动告警错误信息聚类解决后继续监控最佳实践之一 主动监控“要是XXX就好了 要是能有双眼睛帮我盯着发版就好了 要是能在第一时间发现错误

5、就好了 要是能知道慢速用户发生了什么就好了开发人员的诉求“性能样本分布&慢会话“最佳实践之二 慢会话追踪“要是XXX就好了 要是能有双眼睛帮我盯着发版就好了 要是能在第一时间发现错误就好了 要是能知道慢速用户发生了什么就好了 要是能知道用户报了什么错就好了开发人员的诉求“最佳实践之三 搜索报错明细“要是XXX就好了 要是能有双眼睛帮我盯着发版就好了 要是能在第一时间发现错误就好了 要是能知道慢速用户发生了什么就好了 要是能知道用户报了什么错就好了 要是能重现用户行为就好了开发人员的诉求“最佳实践之四 出错行为还原阿里云ARMS前端监控系统架构03“events&mutationreplayer

6、ror msgqueueproducerunique id&time&compress&encryptiondatabasesort by time错误还原“nginx serversls loghubclient日志采集域日志分析域监控告警域realtime computationdata cubedata cubeHbaseHbaseHbasedashboard系统架构图“日志采集域静默采集 单元测试+自动化测试 SDK本身出错隔离 日志加速上行“日志上报连接限制rfc2616规定同域名同时只能2个连接(rfc7230中去掉了具体数字)Chrome同域名限制6个连接 每个请求独占1个连接“

7、日志加速上行 http2多路复用Http2.0 connectionclientserverStream 1Stream 3Stream 3Stream 1Stream 5DATADATADATADATAHEADERS“http头部损耗http头部未压缩，每次请求占用200800字节oreilly统计数据 日志大小仅10-50字节，头部占比超过90%平均每页上百个请求，越来越多流量消耗在头部Http Archive统计数据 UserAgent等信息不会频繁变动“http2头部压缩效果http/1.1http/2VS“http2头部压缩技术实现:methodGET:schemehttps:pat

8、h/resourceuser-agentMozilla/5.0custom-hdrsome-value1:authority2:methodGET51referer62user-agentMozilla/5.063:Static tableDynamic tableRequest headersHuffman(“custom-hdr”)Huffman(“some-value”)Encoded headers27631962Huffman(“/resourses”)“压缩体积的其它办法http 204 no content post请求合并多条日志 错误堆栈中相同url抽取成变量“日志分析域 流

9、计算Dataflow日志分析域 实时计算Flow controlspoutbolt“思考：如何在海量日志中实时取到限定条件的聚合数据“海量数据处理神器 数据立方browserdeviceregion3011221chromeIEsafarisum()IphoneOppoVivoHuaweisum()BeijingShanghaiZhejiangsum()sum(all,all,all)0-D cuboidsum(all,all,all)1-D cuboidEg.sum(all,device,all)2-D cuboidEg.sum(all,device,region)3-D cuboidEg.

10、sum(browser,device,region)“数据立方处理实例113.92.156.89 0-23/Apr/2018:16:24:03+0800 GET http:/arms- 200 0 http:/ 5.1;m2 note Build/LMY47D;wv)AppleWebKit/537.36(KHTML,like Gecko)Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6.2 TBS/043610 Safari/537.36 MicroMessenger/6.5.16.1120 NetType/WIFI Language/zh

11、_CN-72374686283161e2683 cna=-CN?440000?440300?NA phone android 5.1 wechat 6.5.16.1120 webkit 537.36 NA-113.92.156.89 0-23/Apr/2018:16:24:03+0800 GET http:/arms- 200 0 http:/ 5.1;m2 note Build/LMY47D;wv)AppleWebKit/537.36(KHTML,like Gecko)Version/4.0 Chrome/53.0.2785.49 Mobile MQQBrowser/6

12、.2 TBS/043610 Safari/537.36 MicroMessenger/6.5.16.1120 NetType/WIFI Language/zh_CN-72374682324101e2683 cna=-CN?440000?440300?NA phone android 5.1 wechat 6.5.16.1120 webkit 537.36 NA-”.pvperfapi_rate90?.?datacube?-?-?-?datacube?+_ms_123_pv_?_00_ column=d:count_cnt,timestamp=1522

13、134461000,value=x00 x00 x00 x00 x00 x00 x00 x05+_ms_123_pv_?_00_ column=d:count_cnt,timestamp=00,value=x00 x00 x00 x00 x00 x00 x00 x07+_ms_123_pv_?_00_ column=d:count_cnt,timestamp=00,value=x00 x00 x00 x00 x00 x00 x00 x10+_ms_123_pv_?_00_ column

14、=d:count_cnt,timestamp=00,value=x00 x00 x00 x00 x00 x00 x00 x00+_ms_123_pv_?_00_ column=d:count_cnt,timestamp=00,value=x00 x00 x00 x00 x00 x00 x00 x03+_ms_123_pv_?_00_ column=d:count_cnt,timestamp=00,value=x00 x00 x00 x00 x00 x00 x00 x05+_ms_123

15、_pv_?_00_ column=d:count_cnt,timestamp=00,value=x00 x00 x00 x00 x00 x00 x00 x02+_ms_123_pv_?_00_ column=d:count_cnt,timestamp=00,value=x00 x00 x00 x00 x00 x00 x00 x01“参考文献阿里云ARMS前端监控系统How We Track Pageviews Is All WrongTime to First Meaningful Painthttps:/en.wikipedia.org/wiki/Data_cube