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

1、大型Web项目可用性提升优化技术创新，变革未来 大型Web项目可用性提升优化脚本错误监控、优化、持续跟进前端日志系统搭建、优化与打通腾讯文档“白屏”监控体系与优化大纲监控脚本错误“三步曲”如何打造可多人协作的在线文档游戏竞技在线协同五子棋对战艺术创意马赛克作画培养感情协同创作数据层架构复杂，有挑战渲染层网络层离线编辑函数历史记录权限分享导出通知算法实时翻译项目架构页面复杂度高，遇到问题多小小的错误严重的影响脚本错误监控、优化、持续跟进Part 1window.onerrortry catch监控脚本错误跨域脚本错误，无具体错误信息（Script error.）- script标签添加cross

2、origin属性- 响应头增加 Access-Control-Allow-Origin 及 Vary跨源资源共享机制( CORS )，展示具体错误信息JS ErrorTypeErrortim/docs/static/js/sheet-pc-canvas in width error Cannot read property w of undefinedat line1: 8902结合SourceMap文件，还原出错代码原位置代码压缩后，定错出错代码困难监控脚本错误使用CORS，避免Script error结合Sourcemap还原出错源码脚本错误监控“三连击”，找到出错源码这就结束了吗？普通场

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

4、lename xgit checkout PROJECT_VERSION堆栈各个提交人git blame filepath -l x快速找出负责解决错误的处理人确保问题按计划得到解决问题的修复计划 & 跟踪管理 ？生成bug单错误信息错误处理人各堆栈提交人+使用Tap接口通过接口，自动生成 Bug 单推送通过机器人推送告警消息发布问题修复发布后，自动推送修复结果获取本次发布迭代中修复的问题分析问题修复情况自动推送修复结果分析推送集高效、智能地分配问题、持续跟进、自动化监控于一体让开发者专注于解决问题脚本错误持续跟进平台开发解决问题自动验证2134找到出错代码找到错误提交人生成Bug单告警推送发

5、布优化后，脚本错误量下降1. 开发过程中2. 发布前自动化测试阶段JS错误时自动弹窗JS错误时自动提BUG单监控前移，减少新增错误到现网监控异常，智能告警，自动提单新增错误及时解决，错误量得到持续控制异常及时发现，告警推送集高效、智能地分配问题、持续跟进、自动化监控于一体让开发者专注于解决问题脚本错误持续跟进平台开发解决问题自动验证2134找到出错代码找到错误提交人生成Bug单告警推送5转6自动化时出错提单开发时错误弹窗发布脚本错误量降低、问题反馈也随着减少，但还是存在！虽然没有脚本错误没有复现路径功能多交互复杂1234567891单/多选输入2撤销重做3.4数据协同格式刷功能多、交互复杂，问

6、题出处难以定位。腾讯文档打造前端日志平台，记录问题产生的来龙去脉前端日志系统搭建、优化与打通Part 2客户端存储cookie容量小，浪费带宽localStorage容量小，兼容性好websql废弃的标准indexedDB容量大客户端提供接口给Web调用，将日志写入客户端，由客户端统一管理日志日志存储用户特殊操作来触发上传特殊操作延迟加载一个配置白名单的json cdn 文件文件加载，定制差页面打开时请求配置cgi请求，重开页面Socket服务Web设置捞取实时下发通过socket进行实时日志捞取管理平台捞取日志上报主线程上报，影响业务使用1.worker 取 indexeddb2.上报日志上

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

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

9、间加载解析执行首屏资源中加载失败导致内容打不开监控文件的加载情况：优化资源加载: 监控与重试失败文件进行重加载：JS 文件加载顺序发生改变，执行顺序异常加载解析执行管理模块依赖控制执行时机依赖的文件都加载完成，再统一执行使用webpack构建生成管理执行顺序代码结合wait-external-webpack-plugin等待external文件加载完成优化资源加载: 管理执行顺序加载解析执行重试后依然失败？加载重试失败提醒弹框，避免无效等待加载解析执行1. 通过构建添加对应的 integrity 属性防止资源被篡改后注入广告等问题2.篡改资源，浏览器校验失败，加载失败3.更换域名，加载重试保证

10、加载资源完整性，使用 SRI（Subresource Integrity）加载解析执行 SRI 加载资源的完整性 CSP Whitelist 外链脚本安全 CSP Nonce 内联脚本安全限制对不可信域名的资源加载和解析 ( Whitelist )限制异常的内联脚本执行 ( Nonce )加载正确资源，使用 CSP（Content-Security-Policy）加载解析执行JS解析出错，代码无法执行导致打不开JS文件加载保存“失败记录”加载失败1.是否“已达底部”？2.是否无“失败记录”？加载成功是（已全部加载完成）是否存在执行后的变量？否页面底部加载重试标志“已达底部”剔除“失败记录”解析

11、成功解析失败是(正常执行)JS解析不支持的浏览器，重定向到提醒页面es6语法 低端浏览器解析失败加载解析执行JS执行出错，导致内容打不开出现 JS ERROR，后续逻辑不再执行不存在 JS ERROR，但执行逻辑异常Checker.start()Checker.end()执行代码，边执行边记录日志宏任务Checker.check()宏任务出错上报1.未正常执行 end()2.执行 check() 进行检测出异常情况1234告警setTimeout(fn, 0)开启监控记录执行日志标记结束点检查是否正常执行异常上报JS执行（出错）加载解析执行Checker.start()Checker.end()执行代码，边执行边记录日志宏任务Checker.check()Worker线程宏任务Checker.setTimeout开启倒计时，监控时间内是否完成Checker.clearTimeout正常执行，关闭计时器出错上报1.未正常执行 end()2.执行 check() 进行检测出异常情况执行久上报时间段内未完成代码执行112324主线程setTimeout(fn, 0)告警告警因为JS“执行久”被误以为内容打不开