大前端時代前端監控的最佳實踐.pdf

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-7237468115093356836283161e2683 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-7237468115093356922324101e2683 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_?_1522134449000_ column=d:count_cnt,timestamp=1522

13、134461000,value=x00 x00 x00 x00 x00 x00 x00 x05+_ms_123_pv_?_1522134449000_ column=d:count_cnt,timestamp=1522134581000,value=x00 x00 x00 x00 x00 x00 x00 x07+_ms_123_pv_?_1522134449000_ column=d:count_cnt,timestamp=1522134641000,value=x00 x00 x00 x00 x00 x00 x00 x10+_ms_123_pv_?_1522134449000_ column

14、=d:count_cnt,timestamp=1522134701000,value=x00 x00 x00 x00 x00 x00 x00 x00+_ms_123_pv_?_1522134449000_ column=d:count_cnt,timestamp=1522134761000,value=x00 x00 x00 x00 x00 x00 x00 x03+_ms_123_pv_?_1522134449000_ column=d:count_cnt,timestamp=1522134821000,value=x00 x00 x00 x00 x00 x00 x00 x05+_ms_123

15、_pv_?_1522134449000_ column=d:count_cnt,timestamp=1522134881000,value=x00 x00 x00 x00 x00 x00 x00 x02+_ms_123_pv_?_1522134449000_ column=d:count_cnt,timestamp=1522134941000,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