天天看點

核桃程式設計:前端可觀測性建設之路

簡介: 随着核桃程式設計業務的快速增長,核心應用的系統規模和系統複雜度也在經曆翻天覆地的變化。核桃技術團隊不斷通過新興的技術手段維護整套系統架構的技術先進性。在3 年時間裡,技術團隊至少對整體系統架構進行了 6 次以上的重大重構,涉及微服務化、容器化、分布式資料庫等重要的技術,并嘗試通過 Serverless 技術提升系統的彈性伸縮能力。在疫情期間,當系統負荷呈現數倍突增的情況下,核桃程式設計的系統架構依然經受住了考驗。

作者|山獵

根據《中國少兒程式設計行業研究報告》及《2017-2023 年中國少兒程式設計市場分析預測研究報告》預測得出,少兒程式設計有望在 3-5 年内,達到少兒英語市場規模的一半,即 500 億左右,發展前景廣闊。

在資訊化時代的今天,人工智能給人們帶來了巨大變化,新時代的家長處于網際網路時代,與上一代的家長思維産生較大的變化,能夠注重孩子的素質教育,注重培養孩子人工智能方向的才能。少兒程式設計教育就是在這樣的背景下快速發展起來。

核桃程式設計是少兒程式設計教育行業的上司者,緻力于以科技手段促程序式設計教育,通過人工智能、自适應學習等先進技術和科學的教育方法,啟發中國孩子的學習能力。自 2017 年 8 月成立以來,核桃程式設計的業務量飛速發展,僅僅 3 年時間付費學員人數就突破了 200 萬,并實作了單月營收過億。

随着核桃程式設計業務的快速增長,核心應用的系統規模和系統複雜度也在經曆翻天覆地的變化。核桃技術團隊不斷通過新興的技術手段維護整套系統架構的技術先進性。在3 年時間裡,技術團隊至少對整體系統架構進行了 6 次以上的重大重構,涉及微服務化、容器化、分布式資料庫等重要的技術,并嘗試通過 Serverless 技術提升系統的彈性伸縮能力。在疫情期間,當系統負荷呈現數倍突增的情況下,核桃程式設計的系統架構依然經受住了考驗。

随着系統架構從簡單變得複雜,有一個在網際網路領域老大難的問題也逐漸在核桃程式設計中展現出來:如何提升分布式系統的可觀測性?線上上程式設計教學場景裡面,使用者一個簡單的操作,就有可能涉及到前後端系統的多次互動,以及多個服務端微服務應用之間的互相調用,甚至還會受到第三方服務接口的影響。任何一個環節出現故障或者性能瓶頸,都會導緻使用者體驗的斷崖式下跌,而使用者體驗又是決定品牌形象的核心要素,是以對于核桃技術團隊而言,保證優秀的使用者體驗需要在系統可觀測性建設上做到這幾個方面:

  1. 全面而且實時的了解系統每一個對外接口的性能品質。
  2. 通過資料掌握最終使用者與系統互動時感受到的系統健康程度。
  3. 當系統健康程度存在問題時,技術團隊能第一時間發現問題,并及時處理。
  4. 處理問題時,能迅速定位到系統瓶頸和故障源。

任何一個技術團隊要想圍繞着這幾個方面,從零開始建設分布式可觀測體系,都是一項非常艱巨的任務,好在業界對于分布式可觀測性的建設,已經有了不少成熟的方法論以及開源項目可以參考。

業界廣泛認可的可觀測性(observability)包含三個核心要素:Logging(離散的日志資訊)、Metrics(聚合的名額)、Distributed Tracing(分布式追蹤)。圍繞這三個核心要素,有不少開源項目可以進行選擇,幫助開發者快速建設分布式可觀測體系。

核桃程式設計:前端可觀測性建設之路

通過引入 Skywalking,Prometheus 等開源技術,核桃技術團隊建立了完整的分布式可觀測體系,能夠對服務端複雜的微服務應用實作全鍊路追蹤,并通過統一的日志服務體系收集分析業務日志。這樣的努力對于系統穩定性以及使用者體驗的提升是立竿見影的:當系統服務端的任何一個環節出現故障或性能瓶頸的時候,技術團隊都能第一時間得到通知,并快速定位問題,進行針對性處理。

相對于成熟的服務端監控技術,整個業界在用戶端監控領域的技術方案一直比較欠缺。在網際網路上,海量的使用者使用不同廠家、不同作業系統、不同螢幕分辨率的終端裝置,分布在不同的地域,又通過不同的網絡營運商進行接入,甚至存在複雜的第三方依賴,包括 CDN、第三方統計腳本、頁面嵌套等方面。當使用者體驗遇到問題的時候,如果僅僅擁有服務端監控手段,很難第一時間确認問題的根源到底在于前端還是後端。即便能夠排除服務端的問題,前端使用者體驗也受到頁面渲染、JavaScript 執行、網絡品質、第三方接口服務品質等方面的影響,為進一步排查問題留下了非常多的挑戰。

一個簡單的思路是通過前端 JavaScript 做自定義的埋點,将最終使用者的各種行為實時上報給服務端進行統計,以第一時間了解到使用者體驗。這個思路本身是合理的,但業務埋點、資料采集、聚合分析、視圖展現等層面都有非常多的工作需要做,是一個浩大的工程。絕大多數技術團隊而言,投入如此多的精力來建設這樣一套前端監控方案都是不現實的。

建設前端可觀測體系,最好的捷徑是參考網際網路領域頭部企業的案例,選擇雲計算廠商提供的完整方案。阿裡巴巴多年實戰積累了一套全集團統一的前端監控方案,并開放給各個事業部接入。對于以 HTML 頁面形式呈現的前端應用,不管是 PC 端/移動端網站,嵌入到移動端 App 的 HTML5 頁面,都可以通過無侵入的方式接入到這套前端監控方案中。

這套監控方案也同時通過阿裡雲對外輸出,成為阿裡雲可觀測性整體方案的重要組成部分,服務于廣大的外部使用者。

在用戶端監控領域,包括 ARMS 前端監控和 APP 監控兩個産品,其中 ARMS 前端監控專注于 Web 端體驗資料監控,從頁面打開速度、頁面穩定性和外部服務調用成功率這三個方面監測 Web 頁面的健康度,幫助使用者降低頁面加載時間、減少 JS 錯誤,有效提升使用者體驗。

核桃程式設計:前端可觀測性建設之路

這套方案正好能補齊核桃程式設計在用戶端監控領域的能力缺失,是以核桃技術團隊嘗試在一些業務線接入阿裡雲 ARMS 前端監控。很快,他們就感受到了這套方案對于提升使用者體驗所帶來的價值。

ARMS 前端監控方案之是以能被核桃程式設計采納,有一個很重要的原因是方案的接入是非常簡單的,唯一要做的事情是在用戶端 HTML 頁面的 Body 元素中加入一段由 ARMS 提供的統計接入腳本(一段 Java Script 代碼),就能完成監控資料的自動上報。這其中不涉及到任何跟業務層主動埋點的工作,在核桃程式設計的多條業務線之間推廣起來是非常順利的。基于之前的經驗,凡是需要在業務層主動埋點的監控方案,都需要通過行政手段來保證多個研發團隊在編寫代碼的時候遵守既定的規則,這樣的方式從長期來看都是很難落地的。包括在服務端全鍊路監控方面,核桃程式設計也始終遵循業務無侵入的思路,避免主動埋點行為。

接下來,研發人員就能從前端監控控制台全面了解應用端到端的健康程度,包括 PV/UV 情況統計、頁面加載速度情況、JavaScript 執行情況,API 請求成功率等多個方面。以頁面加載速度為例,ARMS 可以基于用戶端自動上報的監控資料,實時展示每一個頁面的加載情況。

核桃程式設計:前端可觀測性建設之路

其中,首次渲染時間、首屏時間、Dom Ready 等名額都是 HTML 頁面獨有的性能名額,遵循業務标準的名額定義。這些名額資料和前端頁面健康程度息息相關,影響着最終使用者每一次互動行為的實際體驗。

通過頁面加載瀑布圖,能夠按照頁面加載的順序,直覺地展示各階段的耗時情況。這些名額參數涵蓋了網絡層面的性能名額,當網絡層面出現性能瓶頸,比如應用系統的接入帶寬不能支撐使用者通路流量的時候,僅僅通過服務端的監控手段,是無法洞察到的,必須依賴于用戶端的實時監控資料上報。通過 ARMS 前端監控,核桃程式設計能從頁面生産時(伺服器端狀态)、頁面加載時和頁面運作時這三個方面,全面了解到每一個應用系統端到端的健康程度。

核桃程式設計:前端可觀測性建設之路

特别重要的是,ARMS 前端監控能夠從地理位置、浏覽器、作業系統、分辨率、網絡營運商、應用版本等多個維護,對性能名額進行聚合分析,進而幫助核桃程式設計更好地定位性能瓶頸。

JavaScript 錯誤分析和 API 請求分析也是核桃程式設計在應用系統的日常維護中非常關心的頁面健康度名額。前者可以展示 JavaScript 錯誤的基本資訊和分布情況,并具備回溯使用者行為的能力。後者可以展示每個 API 的調用情況,包括調用成功率、傳回資訊、調用成功或失敗的平均耗時等。目前端頁面完全載入後,使用者的操作會涉及到複雜的 JavaScript 執行,并在頁面觸發多個 API 調用,其中還包括對第三方提供的接口調用。

ARMS 能夠從最終使用者的角度,真實還原前端代碼執行的完整現場,幫助核桃程式設計快速定位來自前端的故障源。和頁面加載速度統計一樣,JavaScript 錯誤分析和 API 請求分析都能夠通過地理位置、浏覽器等多種次元進行聚合分析。線上上程式設計教育的業務場景裡面,用戶端的實作包含着大量業務邏輯以及雲端之間的雙向互動,有一些問題隻有在特定的浏覽器和頁面分辨率下才有可能暴露出來,這類問題就特别依賴多元度聚合分析進行排查。

在熟練掌握 ARMS 提供的前端可觀測性能力之後,核桃程式設計開始把前端頁面健康度名額作為日常業務疊代的檢測标準,這項工作是通過與所有業務線的灰階釋出計劃互相配合而進行的。對于生産環境的每一次版本更新,核桃程式設計都會通過灰階釋出的方式實作,先将小規模的使用者流量導入新版本進行功能性、穩定性、健康性驗證,隻有滿足預先定義的各項名額後,才會逐漸增加導入新版本的使用者流量,否則會立即對版本進行復原。前端健康度的各種名額都是非常重要的衡量次元,而這些名額僅僅通過版本釋出前的正常測試手段,是沒有辦法全面采集到的。核桃程式設計将前端健康度納入業務疊代的衡量标準,展現着業務疊代過程中的可灰階、可觀測、可復原,這也是在阿裡巴巴廣為推崇的安全生産三闆斧原則。

核桃程式設計:前端可觀測性建設之路

除了通過 ARMS 控制台主動的觀察分析,掌握各項前端業務名額之外,更重要的事情是在遇到使用者體驗問題時,如何第一時間得到通知和告警,防患于未然。這個訴求通過 ARMS 完善的報警機制可以輕松實作。核桃基于自身對前端健康度的了解,以及業界通用的方法論,建立了多種次元的報警規則,比如“最近 5 分鐘内平均頁面首次渲染耗時大于 1 秒”等。當規則被觸發時,系統會以預先指定的報警方式向報警聯系人分組發送報警資訊,以提醒技術團隊及時解決。這些報警規則再配合上對生産故障的分級分類定義,能夠幫助核桃技術團隊建立一整套生産故障應對機制,真正實作實線上問題 5 分鐘内發現,10 分鐘内隔離,30 分鐘内解決。

核桃程式設計:前端可觀測性建設之路

核桃程式設計還積極探索前後端統一鍊路追蹤技術,将 API 請求從前端發出到後端調用的鍊路串聯起來,真實還原代碼執行的完整現場。這是通過對前端 API 請求自動注入 Trace 資訊而實作,ARMS 前端監控能夠在允許 API 自動上報的前提下,在 API 請求的 Request Header 中加入自動生成的 TraceID ,作為串聯前後端鍊路的辨別。這樣通過調用的時間軸,可以知道是網絡傳輸還是後端調用導緻請求耗時時間過長,進一步通過後端應用的線程剖析功能,可以洞察每次請求後端的完整調用鍊路,對于排查系統故障和性能瓶頸帶來了非常大的幫助。

完善的前端可觀測體系在幫助核桃程式設計減少了 30% 以上的運維工作量的同時,還縮短了 60% 以上的故障定位平均耗時,極大地提升了使用者體驗,為業務持續發展打下了堅實的基礎。核桃技術團隊将基于自身的技術特點,繼續探索更多前沿的雲原生技術,充分享受雲計算帶來的紅利。

繼續閱讀