扣丁書屋

構建前端安全生產體系,最快5分鐘定位故障

隨著前端技術的發展,加上前端代碼主要運行在客戶設備上的特性,導致前端穩定性問題層出不窮,稍有不慎就可能會給用戶帶來巨大損失。我們如何系統化地搭建前端安全生產體系,保障前端安全生產?阿里提出“前端安全生產”概念,在前端應用開發、發布、線上運行的不同階段,通過自動化流程機制,讓前端工程師產出的代碼更加靠譜,不帶著問題發布,即便線上發現前端故障也能及時“止血”,旨在完成前端研發全鏈路的高質量交付。

榮先乾(戊子)是阿里巴巴高級前端技術專家,現任阿里巴巴設計中臺 & 業務平臺前端中臺技術負責人。他也是 GMTC 北京 2020 “前端安全生產”專題的出品人。InfoQ 在會前采訪了戊子老師,請他介紹什么是前端安全生產,阿里在搭建前端安全生產體系時遇到的挑戰,以及如何搭建自己的前端安全生產體系等問題。

InfoQ:阿里首次提出“前端安全生產”這一概念,我們應如何理解?

戊子:近??年來,伴隨互聯??業的?速發展,互聯?已成為?個國家重要的基礎設施,出?基礎設施的任何?個故障,都可能對國計??產?重?的影響。而最近?年來,隨著前端專業化分?的誕?、前端專業技術的發展,前端研發在整個互聯? Web 應?研發?程鏈路上扮演著越來越重要的??,前端安全?產的責任也隨之放?,在前端應?開發、發布、線上運?的不同階段,如何讓前端?程師產出的代碼更加靠譜,不帶著問題發布,即便在線上發現前端故障后也能及時???這便是“前端安全?產”需要解決的問題。

今天我們所討論的“前端安全?產”不同于傳統的“前端安全”這個領域,前端安全關注前端領域的線上安全攻防問題,?“前端安全?產”的定義顯然更?,“前端安全?產”專注于前端研發全鏈路的?質量交付,當然,也包含不要帶著“前端安全”問題去交付。

討論到這?,我們也有了“前端安全?產”的?個基本定義?!扒岸税踩?產”專注于前端研發全鏈路的?質量交付,在前端應?開發、發布、線上運?三個關鍵階段,通過?系列的?動化流程機制,控制前端代碼?險,保障線上業務運?穩定,?機制保護?,不給前端同學引發線上故障的犯錯機會,最終規避損失或者降低損失。

InfoQ:為了保障前端安全?產,阿?做了哪些工作?其中最典型的是什么?

戊子:回顧過去歷史上的重?故障,以及盤點過去的故障列表,我們發現絕?部分故障都是由變更引起的,前端安全?產也不例外,也是從觸發故障的源頭變更流程開始切?。在前端版本變更前、變更中、變更后,我們通過?系列的措施去提升前端代碼質量、控制發布?險、及時發現問題。這其中的關鍵過程包含:

  • 前端版本變更前:靜態代碼掃描、?定義?程規范校驗、單元測試 ;
  • 前端版本變更中:UI 回歸測試、迭代變更?險評估、灰度監控報告;
  • 前端版本變更后:1 分鐘發現問題、5 分鐘定位問題、10 分鐘修復問題。

從上圖可以發現,前端安全?產并??個全新的領域,更多的是組合現有的分散在不同系統的能?,包括前端?程體系、前端 CI/CD 系統、前端測試系統、前端監控系統,讓我們更體系化保障前端研發全鏈路的?質量交付。

InfoQ:建?前端安全?產體系之初遇到哪些問題?針對這些問題我們是如何去解決的?

戊子:整個前端安全?產體系涉及到的?部分能?都是整合現有的前端相關系統等,整合過程中我們重點補?了多項核?能?。接下來我將挑三個有代表性的?向給?家介紹,主要涉及前端迭代變更?險評估、前端灰度監控報告以及 5 分鐘快速定位問題。

  • 前端迭代變更?險評估

在回歸測試階段,我們需要明確知道本次前端版本迭代所造成的影響點,以供開發同學?測或者是測試同學重點回歸相應部分,?論是??測試,還是?動化回歸,到很依賴這個關鍵信息。另外?種常?的場景是,前端代碼本身沒做任何改動,但是由于依賴的??/ 三?包?動升級,導致某些場景出現?法預料的問題。這些都是因為前端迭代影響點??評估不全?可能觸發故障的典型場景。為了解決前端迭代中?法準確給出回歸點的問題,我們提供了迭代影響點評估?具,重點提供以下能?:

  • 開發同學明確本次迭代相對于上?次迭代的顯示 & 隱式變更;
  • 開發同學明確哪些項??件將會受到所有這些變更的影響,并且能夠看到具體的影響路徑;
  • 開發 / 測試同學能夠看到更加全?、有理有據的回歸功能點。

  • 前端灰度監控報告

前端灰度監控的核??的是讓前端灰度發布的結果有據可依。在灰度發布期間,監控會重點關注前端灰度環境和線上環境對?后??訪問速度變化、JS 錯誤率變化、新出現的 JS 異常以及 API 成功率變化,?動?成灰度監控報告,同時也會通過灰度流量??覆蓋率、API 覆蓋率來判定是否需要延?灰度時?或加?灰度流量?例。

  • 應?全鏈路的 5 分鐘快速定位問題

通過前端?成 traceId 并透傳到后端業務調?鏈路的?式,打通應?從前端到后端全鏈路問題追蹤,從前端發現的 API 錯誤問題,可以通過 traceId 關聯直達后端監控系統,?幅減少涉及到應?全鏈路的問題定位時間,?此前端同學發現 API 相關問題后不再“甩鍋”到后端,?是給后端同學提供診斷問題的有效線索。

InfoQ:目前,阿里的前端安全?產體系的現狀如何?

戊子:整個前端安全?產體系的建設在我們部?內部?致分為三個階段,?直到第三個階段,我們才真正意義上完成了整個體系的 1.0 建設。這三個階段分別是:單點安全?產保障、多煙囪獨?安全?產保障、體系化的前端安全?產保障。

  • 單點安全?產保障階段:線上前端監控

2015 年 8 ?,我們啟動了前端監控系統 retcode 的建設,通過線上實時監控??訪問速度、JS Error、API 成功率核?的三板斧能?,為前端應?的運?態穩定性保駕護航。2016 年底, retcode 成?為阿?集團內部使?最?泛的前端監控產品,這個階段內,我們核?還是依靠線上前端監控的單點能?去保障前端的安全?產。為了持續修煉前端監控產品的核?能?,在 2017 年中我們啟動了 retcode 的上云計劃,進?前端安全?產建設的第?個階段。

  • 多煙囪獨?安全?產保障階段:云化前端監控 + 其他保障

2017 年 9 ?,retcode 升級為阿?云 ARMS 前端監控,開啟全?公測。在直??業競爭對?的同時,我們的多項核?能?得到極?提升,這其中包括?向全球化業務的國際極致性能、JS Error 出錯時?戶?為回溯、API 接?快照以及打通前后端的全鏈路追蹤等等,前端監控平臺也經歷了從“錯誤數據展示”到“專家級問題診斷”的升級,整個平臺每天處理的?志條數也超過了百億級別。

這個階段內,除了前端監控平臺在阿?云上的產品能?升級助?前端安全?產,在我們部?內部,也開始借助?系列其他的能?來保障前端安全?產,如靜態代碼掃描、TDD、UI ?動化回歸等,這些可以保障前端安全?產的單點能?越來越多,但是?多是獨?煙囪服務模式,各個保障流程節點之間并未完全打通。

在阿?集團內部,也缺乏?套集團層?體系化的前端灰度發布流程,表現在前端發布與后端上線存在流程割裂、后端灰度發布時前端?感、整個應?灰度階段?多是??前端驗證或者驗證缺失。

  • 體系化的前端安全?產保障階段:前端安全?產從 0 到 1

為了解決前端安全?產各個保障節點的孤島問題,同時結合集團后端正在??推進安全?產的時機,前端安全?產的體系化建設也應運??。當前我們部?整個前端安全?產體系剛剛完成從 0 到 1,正在電商核?的基礎交易鏈路、?促穩定性保障、業務穩定性基線?常治理等項?中落地。

舉?個實際的場景例?,阿?歷年雙 11 穩定性保障依賴的最核?能?之?便是全鏈路壓測和驗收。我們都知道全鏈路壓測重點關注 API 級別的穩定性,在全鏈路壓測過程中 API 上的各種異常表現,并不能體現到前端 UI 層?上,這個時候前端同學并不清楚后端 API 異常和降級后,前端 UI 層?的表現是否符合預期。借助前端 UI ?動化回歸測試,我們將交易核?鏈路上的核?功能全部增加了測試?例,在后端開啟全鏈路壓測時候,前端同時開啟回歸測試,便形成了前端的全鏈路壓測和驗收。進?,我們會借助前端安全?產體系打造的前端變更時卡?能?,在每次前端?常變更時?動觸發前端回歸測試,降低核?交易鏈路上每次前端版本變更的?險。

InfoQ:我們如何構建?個前端安全?產體系呢?在構建的過程中要注意些什么問題。

戊子:通過前?的介紹我們已經可以了解到,構建?個完整的前端安全?產體系需要三項核?能?。

  • 變更發?前 CI 卡?能?

靜態代碼掃描、?定義?程規范校驗、單元測試通過率 & 覆蓋率均是通過插件能?安裝到 CI 卡?上,這?可以根據實際業務場景下的痛點問題擴展更多的插件能?,在前端同學每次代碼提交后都能及時給予反饋, ?不?將問題拖到測試或者預發甚?是線上環境。

  • 變更過程中的灰度卡?能?

UI 回歸測試、前端迭代變更?險評估、灰度監控報告也是作為插件能?安裝到了灰度發布卡?上,這?同樣也是可以根據實際業務場景下的痛點問題擴展更多的插件能?,在前端同學每次版本發布前都能及時給予反饋,遇到異常問題時直接中斷發布過程。

根據安全?程學上的海恩法則“每?起嚴重事故的背后,必然有 29 次輕微事故和 300 起未遂先兆以及 1000 起事故隱患”,我們在變更發?前的 CI 卡?、變更過程中的灰度卡?都是為了杜絕?切可能引發線上故障的潛在因素,不帶著有問題的版本上線。

  • 變更完成后的線上實時監控能?

線上實時監控是最后?個?常重要的能?,?個強?的監控系統能夠幫忙我們 1 分鐘發現問題和 5 分鐘定位問題根因,為我們 10 分鐘快速修復問題也就是快速回滾提供決策依據。根據安全?程學上的瑞?奶酪模型,“故障的發?是各種防御?為失效的累計效應”。在變更發?前 CI 卡?能?和變更過程中的灰度卡?能?全部都失效后,線上監控是我們的最后?道防線,能夠幫我們有效的扼制故障范圍進?步擴?,降低損失。

(圖片來源網絡)

除了上?提到的技術?段,安全?產的?為準則和?化同樣必不可少,如制定變更紅線規約、安全?產專題分享等等。細?的讀者可能已經發現,GMTC 深圳 2019 的專題“前端測試”在今年已經升級為“前端安全?產”,也是想傳遞?個信號,我們正在經歷從過去被動的由測試同學主導的前端測試?向前端同學??有責的主動前端安全?產保障時代,?過去的測試同學也升級為了測試研發同學,正在給我們的前端安全?產體系提供強?的插件能?。

InfoQ:您認為“前端安全?產”將是?個?的趨勢嗎?未來,它將會有怎么樣的發展。

戊子:當互聯?已成為?個國家重要的基礎設施,傳統?業正身處企業數字化轉型浪潮之中,互聯?安全?產必將越來越重要,?置身其中的前端安全?產也肯定會越來越受?家重視。從我的?度看到的前端安全?產未來將會由如下?個衍變趨勢。

  • 前后端聯動的應用研發全鏈路安全生產;
  • 借力 Cloud IDE 普及后自動集成的前端安全生產能力受益;
  • 前端安全生產自動化免測版本比例提升帶來的效率提升和成本下降;
  • 從提供錯誤信息到更智能的專家級診斷、主動風險預警、故障自動恢復。

還是那句話,前端安全?產并??個全新的領域,讓我們?更體系化的系統,去控制?險并保障業務穩定, 同時讓每個?都更加重視前端安全?產,?機制保護?,不給前端同學引發線上故障的犯錯機會,最終規避損失,讓每個程序員都能愉快地發布!

作者 | 冉葉蘭 嘉賓 |榮先乾(戊子)


https://mp.weixin.qq.com/s/7vyar5kKFnYY6MZIl_SiHA

最多閱讀

為Electron程序添加運行時日志 3年以前  |  14868次閱讀
Node.js下通過配置host訪問URL 3年以前  |  4765次閱讀
js動態創建類和實例化 3年以前  |  3902次閱讀
wordpress標簽頁的制作 3年以前  |  3739次閱讀
初探 React 組件 3年以前  |  3712次閱讀
用 esbuild 讓你的構建壓縮性能翻倍 2年以前  |  3700次閱讀
500行PHP代碼搞定富文本安全過濾 3年以前  |  3606次閱讀
10 種跨域解決方案(附終極方案) 2年以前  |  3508次閱讀
22個HTML5的初級技巧 3年以前  |  3480次閱讀
MBTI免費在線測試 3年以前  |  3428次閱讀
使用 SRI 增強 localStorage 代碼安全 3年以前  |  3357次閱讀
淺談瀏覽器的原生拖拽事件 3年以前  |  3352次閱讀
CSS清除浮動 3年以前  |  3348次閱讀
第三版主題上線 3年以前  |  3285次閱讀
利用服務器返回header來傳輸數據 3年以前  |  3256次閱讀

手機掃碼閱讀
18禁止午夜福利体验区,人与动人物xxxx毛片人与狍,色男人窝网站聚色窝
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>