大前端时代前端监控的最佳实践.pdf

《大前端时代前端监控的最佳实践.pdf》由会员分享，可在线阅读，更多相关《大前端时代前端监控的最佳实践.pdf（51页珍藏版）》请在三个皮匠报告上搜索。

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个连接“