大型Web项目可用性提升优化

1、大型Web项目可用性提升优化,郭林烁 ( joeyguo ),郭林烁（joeyguo）,AlloyTeam 可用性提升技术项目负责人,脚本错误监控平台、日志平台负责人 负责项目中脚本错误、页面白屏、卡顿等优化专项,大型Web项目可用性提升优化 脚本错误监控、优化、持续跟进 前端日志系统搭建、优化与打通 腾讯文档“白屏”监控体系与优化,大纲,监控脚本错误“三步曲” 如何打造,可多人协作的在线文档,游戏竞技,在线协同五子棋对战,艺术创意,马赛克作画,培养感情,协同创作,数据层,架构复杂，有挑战,渲染层,网络层,离线编辑,函数,历史记录,权限,分享,导出,通知,算法,实时翻译,项目架构,页面复杂度高

2、，遇到问题多,小小的错误,严重的影响,脚本错误监控、优化、持续跟进,Part 1,window.onerror,try catch,监控脚本错误,跨域脚本错误，无具体错误信息（Script error.）,- script标签添加crossorigin属性,- 响应头增加 Access-Control-Allow-Origin 及 Vary,跨源资源共享机制( CORS )，展示具体错误信息,结合SourceMap文件，还原出错代码原位置,代码压缩后，定错出错代码困难,监控脚本错误,使用CORS，避免Script error,结合Sourcemap还原出错源码,脚本错误监控“三连击”，找到出错

3、源码,这就结束了吗？,普通场景，最新代码版本覆盖率约 99.6%,灰度场景下，代码版本分布差异大,现网代码版本号分布情况,老代码的错误？灰度代码的错误？,哪个版本的代码出现的问题？,、,根据错误信息“版本号”，找到出错时代码,上报SDK配置版本号,根据版本号打入代码 Tag,发布,出错信息（含版本号）,异常上报,通过“版本号”进行关联,找到“出错时代码”,1,2,根据收集到的错误信息 checkout 到对应 Tag，找到出错时代码,代码版本号,项目中模块多,人工分配错误处理人，效率低,错误众多，谁来负责解决？,错误分散,通过历史提交记录，找出最近提交的开发者作为问题的处理人,获取错误信息,最

4、近的提交人,找到出错时代码,代码版本号、文件路径、行列数,git blame filename x,git checkout PROJECT_VERSION,堆栈各个提交人,git blame filepath -l x,快速找出负责解决错误的处理人,确保问题按计划得到解决,问题的修复计划 & 跟踪管理 ？,生成bug单,错误信息,错误处理人,各堆栈提交人,+,+,使用Tap接口,通过接口，自动生成 Bug 单,推送,通过机器人推送告警消息,发布,问题修复发布后，自动推送修复结果,获取本次发布迭代中修复的问题,分析问题修复情况,自动推送修复结果,分析,推送,集高效、智能地分配问题、持续跟进、自

5、动化监控于一体,让开发者专注于解决问题,脚本错误持续跟进平台,开发解决问题,自动验证,2,1,3,4,找到出错代码,找到错误提交人,生成Bug单,告警推送,发布,优化后，脚本错误量下降,1. 开发过程中,2. 发布前自动化测试阶段,JS错误时自动弹窗,JS错误时自动提BUG单,监控前移，减少新增错误到现网,监控异常，智能告警，自动提单,新增错误及时解决，错误量得到持续控制,异常及时发现，告警推送,集高效、智能地分配问题、持续跟进、自动化监控于一体,让开发者专注于解决问题,脚本错误持续跟进平台,开发解决问题,自动验证,2,1,3,4,找到出错代码,找到错误提交人,生成Bug单,告警推送,5转,6

6、,自动化时出错提单,开发时错误弹窗,发布,脚本错误量降低、问题反馈也随着减少,，但还是存在！,虽然,没有脚本错误,没有复现路径,功能多,交互复杂,单/多选输入,撤销重做,.,数据协同,格式刷,功能多、交互复杂，问题出处难以定位。,腾讯文档,打造前端日志平台，记录问题产生的来龙去脉,前端日志系统搭建、优化与打通,Part 2,客户端存储,客户端提供接口给Web调用，将日志 写入客户端，由客户端统一管理日志,日志存储,设置捞取,实时下发,通过socket进行实时日志捞取,捞取日志,上报,主线程上报，影响业务使用,1.worker 取 indexeddb,2.上报日志,上报日志,Worker 线程上

7、报， 与主线程相互独立，互不影响,日志展示,这就结束了吗？,脚本报错唯一id: eventId,日志唯一id: sessionId,相互关联,日志会话 sessionId 与 脚本错误 eventId 相互关联,日志与脚本错误平台（如 Sentry）结合,、,日志与脚本错误平台（如 Sentry）结合，加快分析JS错误,前端 为每个ajax请求头带上唯一 seq_id，日志记录该 id,后端 记录请求头中的 seq_id 及对应的请求与返回数据,ajax 请求,ajax 拦截器,nginx,写入日志,后端链路日志,前后端日志关联，打通全链路日志,seq_id,结合用户反馈信息，加快问题分析,反

8、馈 id,日志 id,日志与反馈平台(吐个槽)结合,万事具备，只欠“反馈”,根据日志，分析解决问题,问题：插入一行后，表格部分展示空白,根据日志，分析解决问题,日志流水,结果,根据日志流水，沉淀测试用例,测试用例,沉淀,保存遇到问题的测试用例，让问题到此为止,+,日志转换为测试用例，避免问题再现,主动出击，提前解决,腾讯文档“白屏”监控体系与优化,Part 3,看不到页面内容，严重影响用户体验,加载,解析,执行,“白屏”监控体系与优化,展示Loading,完全空白,等待资源加载，空白时间长,HTML 加载后立即展示Loading，减少全空白时间,HTML加载,CSS加载,JS加载,HTML加载

9、,拆分、内联首屏CSS HTML 内实现 Loading 态,减少焦虑，优化全空白时间,加载,解析,执行,首屏资源中加载失败导致内容打不开,监控文件的加载情况：,优化资源加载: 监控与重试,失败文件进行重加载：,JS 文件加载顺序发生改变，执行顺序异常,加载,解析,执行,管理模块依赖 控制执行时机,依赖的文件都加载完成，再统一执行,使用webpack构建生成管理执行顺序代码,结合wait-external-webpack-plugin等待external文件加载完成,优化资源加载: 管理执行顺序,加载,解析,执行,重试后依然失败？,加载重试失败提醒弹框，避免无效等待,加载,解析,执行,1. 通

10、过构建添加对应的 integrity 属性,防止资源被篡改后注入广告等问题,2.篡改资源，浏览器校验失败，加载失败,3.更换域名，加载重试,保证加载资源完整性，使用 SRI（Subresource Integrity）,加载,解析,执行,限制对不可信域名的资源加载和解析 ( Whitelist ) 限制异常的内联脚本执行 ( Nonce ),加载正确资源，使用 CSP（Content-Security-Policy）,加载,解析,执行,JS解析出错，代码无法执行导致打不开,JS文件加载,保存“失败记录”,加载失败,加载成功,是（已全部加载完成）,是否存在执行后的变量？,否,页面底部,加载重试,标志“已达底部”,剔除“失败记录”,解析成功,解析失败,是,(正常执行),JS解析,不支持的浏览器，重定向到提醒页面,es6语法 低端浏览器解析失败,加载,解析,执行,JS执行出错，导致内容打不开,出现 JS ERROR，后续逻辑不再执行 不存在 JS ERROR，但执行逻辑异常,JS执行（出错）,加载,解析,执行,因为JS“执行久”被误以为内容打不开了,JS执行（久）,加载,解析,执行,主线程卡住了，worker的计时器不受影