大型Web項目可用性提升優(yōu)化

1、大型Web項目可用性提升優(yōu)化技術創(chuàng)新，變革未來 大型Web項目可用性提升優(yōu)化腳本錯誤監(jiān)控、優(yōu)化、持續(xù)跟進前端日志系統(tǒng)搭建、優(yōu)化與打通騰訊文檔“白屏”監(jiān)控體系與優(yōu)化大綱監(jiān)控腳本錯誤“三步曲”如何打造可多人協(xié)作的在線文檔游戲競技在線協(xié)同五子棋對戰(zhàn)藝術創(chuàng)意馬賽克作畫培養(yǎng)感情協(xié)同創(chuàng)作數(shù)據(jù)層架構復雜，有挑戰(zhàn)渲染層網(wǎng)絡層離線編輯函數(shù)歷史記錄權限分享導出通知算法實時翻譯項目架構頁面復雜度高，遇到問題多小小的錯誤嚴重的影響腳本錯誤監(jiān)控、優(yōu)化、持續(xù)跟進Part 1window.onerrortry catch監(jiān)控腳本錯誤跨域腳本錯誤，無具體錯誤信息（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文件，還原出錯代碼原位置代碼壓縮后，定錯出錯代碼困難監(jiān)控腳本錯誤使用CORS，避免Script error結合Sourcemap還原出錯源碼腳本錯誤監(jiān)控“三連擊”，找到出錯源碼這就結束了嗎？普通場

3、景，最新代碼版本覆蓋率約 99.6%灰度場景下，代碼版本分布差異大現(xiàn)網(wǎng)代碼版本號分布情況老代碼的錯誤？灰度代碼的錯誤？哪個版本的代碼出現(xiàn)的問題？、根據(jù)錯誤信息“版本號”，找到出錯時代碼上報SDK配置版本號根據(jù)版本號打入代碼 Tag發(fā)布出錯信息（含版本號）異常上報通過“版本號”進行關聯(lián)找到“出錯時代碼”12根據(jù)收集到的錯誤信息checkout 到對應 Tag，找到出錯時代碼代碼版本號項目中模塊多人工分配錯誤處理人，效率低錯誤眾多，誰來負責解決？錯誤分散通過歷史提交記錄，找出最近提交的開發(fā)者作為問題的處理人獲取錯誤信息最近的提交人找到出錯時代碼代碼版本號、文件路徑、行列數(shù) git blame fi

4、lename xgit checkout PROJECT_VERSION堆棧各個提交人git blame filepath -l x快速找出負責解決錯誤的處理人確保問題按計劃得到解決問題的修復計劃 & 跟蹤管理 ？生成bug單錯誤信息錯誤處理人各堆棧提交人+使用Tap接口通過接口，自動生成 Bug 單推送通過機器人推送告警消息發(fā)布問題修復發(fā)布后，自動推送修復結果獲取本次發(fā)布迭代中修復的問題分析問題修復情況自動推送修復結果分析推送集高效、智能地分配問題、持續(xù)跟進、自動化監(jiān)控于一體讓開發(fā)者專注于解決問題腳本錯誤持續(xù)跟進平臺開發(fā)解決問題自動驗證2134找到出錯代碼找到錯誤提交人生成Bug單告警推送發(fā)

5、布優(yōu)化后，腳本錯誤量下降1. 開發(fā)過程中2. 發(fā)布前自動化測試階段JS錯誤時自動彈窗JS錯誤時自動提BUG單監(jiān)控前移，減少新增錯誤到現(xiàn)網(wǎng)監(jiān)控異常，智能告警，自動提單新增錯誤及時解決，錯誤量得到持續(xù)控制異常及時發(fā)現(xiàn)，告警推送集高效、智能地分配問題、持續(xù)跟進、自動化監(jiān)控于一體讓開發(fā)者專注于解決問題腳本錯誤持續(xù)跟進平臺開發(fā)解決問題自動驗證2134找到出錯代碼找到錯誤提交人生成Bug單告警推送5轉(zhuǎn)6自動化時出錯提單開發(fā)時錯誤彈窗發(fā)布腳本錯誤量降低、問題反饋也隨著減少，但還是存在！雖然沒有腳本錯誤沒有復現(xiàn)路徑功能多交互復雜1234567891單/多選輸入2撤銷重做3.4數(shù)據(jù)協(xié)同格式刷功能多、交互復雜，問

6、題出處難以定位。騰訊文檔打造前端日志平臺，記錄問題產(chǎn)生的來龍去脈前端日志系統(tǒng)搭建、優(yōu)化與打通Part 2客戶端存儲cookie容量小，浪費帶寬localStorage容量小，兼容性好websql廢棄的標準indexedDB容量大客戶端提供接口給Web調(diào)用，將日志寫入客戶端，由客戶端統(tǒng)一管理日志日志存儲用戶特殊操作來觸發(fā)上傳特殊操作延遲加載一個配置白名單的json cdn 文件文件加載，定制差頁面打開時請求配置cgi請求，重開頁面Socket服務Web設置撈取實時下發(fā)通過socket進行實時日志撈取管理平臺撈取日志上報主線程上報，影響業(yè)務使用1.worker 取 indexeddb2.上報日志上

7、報日志W(wǎng)orker 線程上報， 與主線程相互獨立，互不影響日志展示這就結束了嗎？腳本報錯唯一id: eventId日志唯一id: sessionId相互關聯(lián)日志會話 sessionId 與 腳本錯誤 eventId 相互關聯(lián)日志與腳本錯誤平臺（如 Sentry）結合、日志與腳本錯誤平臺（如 Sentry）結合，加快分析JS錯誤前端 為每個ajax請求頭帶上唯一 seq_id，日志記錄該 id后端 記錄請求頭中的 seq_id 及對應的請求與返回數(shù)據(jù)ajax請求ajax攔截器nginx寫入日志后端鏈路日志前后端日志關聯(lián)，打通全鏈路日志seq_id結合用戶反饋信息，加快問題分析反饋 id日志 id

8、日志與反饋平臺(吐個槽)結合萬事具備，只欠“反饋”根據(jù)日志，分析解決問題問題：插入一行后，表格部分展示空白根據(jù)日志，分析解決問題日志流水結果根據(jù)日志流水，沉淀測試用例測試用例沉淀保存遇到問題的測試用例，讓問題到此為止+日志轉(zhuǎn)換為測試用例，避免問題再現(xiàn)主動出擊，提前解決騰訊文檔“白屏”監(jiān)控體系與優(yōu)化Part 3看不到頁面內(nèi)容，嚴重影響用戶體驗加載解析執(zhí)行“白屏”監(jiān)控體系與優(yōu)化展示Loading完全空白等待資源加載，空白時間長HTML 加載后立即展示Loading，減少全空白時間HTML加載CSS加載JS加載HTML加載拆分、內(nèi)聯(lián)首屏CSSHTML 內(nèi)實現(xiàn) Loading 態(tài)減少焦慮，優(yōu)化全空白時

9、間加載解析執(zhí)行首屏資源中加載失敗導致內(nèi)容打不開監(jiān)控文件的加載情況：優(yōu)化資源加載: 監(jiān)控與重試失敗文件進行重加載：JS 文件加載順序發(fā)生改變，執(zhí)行順序異常加載解析執(zhí)行管理模塊依賴控制執(zhí)行時機依賴的文件都加載完成，再統(tǒng)一執(zhí)行使用webpack構建生成管理執(zhí)行順序代碼結合wait-external-webpack-plugin等待external文件加載完成優(yōu)化資源加載: 管理執(zhí)行順序加載解析執(zhí)行重試后依然失?。考虞d重試失敗提醒彈框，避免無效等待加載解析執(zhí)行1. 通過構建添加對應的 integrity 屬性防止資源被篡改后注入廣告等問題2.篡改資源，瀏覽器校驗失敗，加載失敗3.更換域名，加載重試保證

10、加載資源完整性，使用 SRI（Subresource Integrity）加載解析執(zhí)行 SRI 加載資源的完整性 CSP Whitelist 外鏈腳本安全 CSP Nonce 內(nèi)聯(lián)腳本安全限制對不可信域名的資源加載和解析 ( Whitelist )限制異常的內(nèi)聯(lián)腳本執(zhí)行 ( Nonce )加載正確資源，使用 CSP（Content-Security-Policy）加載解析執(zhí)行JS解析出錯，代碼無法執(zhí)行導致打不開JS文件加載保存“失敗記錄”加載失敗1.是否“已達底部”？2.是否無“失敗記錄”？加載成功是（已全部加載完成）是否存在執(zhí)行后的變量？否頁面底部加載重試標志“已達底部”剔除“失敗記錄”解析

11、成功解析失敗是(正常執(zhí)行)JS解析不支持的瀏覽器，重定向到提醒頁面es6語法 低端瀏覽器解析失敗加載解析執(zhí)行JS執(zhí)行出錯，導致內(nèi)容打不開出現(xiàn) JS ERROR，后續(xù)邏輯不再執(zhí)行不存在 JS ERROR，但執(zhí)行邏輯異常Checker.start()Checker.end()執(zhí)行代碼，邊執(zhí)行邊記錄日志宏任務Checker.check()宏任務出錯上報1.未正常執(zhí)行 end()2.執(zhí)行 check() 進行檢測出異常情況1234告警setTimeout(fn, 0)開啟監(jiān)控記錄執(zhí)行日志標記結束點檢查是否正常執(zhí)行異常上報JS執(zhí)行（出錯）加載解析執(zhí)行Checker.start()Checker.end()執(zhí)行代碼，邊執(zhí)行邊記錄日志宏任務Checker.check()Worker線程宏任務Checker.setTimeout開啟倒計時，監(jiān)控時間內(nèi)是否完成Checker.clearTimeout正常執(zhí)行，關閉計時器出錯上報1.未正常執(zhí)行 end()2.執(zhí)行 check() 進行檢測出異常情況執(zhí)行久上報時間段內(nèi)未完成代碼執(zhí)行112324主線程setTimeout(fn, 0)告警告警因為JS“執(zhí)行久”被誤以為內(nèi)容打不開