開發與維運

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

作者|山獵

週六實戰案例公眾號首圖(改5).png

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

在信息化時代的今天,人工智能給人們帶來了巨大變化,新時代的家長處於互聯網時代,與上一代的家長思維產生較大的變化,能夠注重孩子的素質教育,注重培養孩子人工智能方向的才能。少兒編程教育就是在這樣的背景下快速發展起來。

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

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

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

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

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

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

1.png

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

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

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

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

2.png

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

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

3.png

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

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

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

4.png

其中,首次渲染時間、首屏時間、Dom Ready 等指標都是 HTML 頁面獨有的性能指標,遵循業務標準的指標定義。這些指標數據和前端頁面健康程度息息相關,影響著最終用戶每一次交互行為的實際體驗。

5.png

通過頁面加載瀑布圖,能夠按照頁面加載的順序,直觀地展示各階段的耗時情況。這些指標參數涵蓋了網絡層面的性能指標,當網絡層面出現性能瓶頸,比如應用系統的接入帶寬不能支撐用戶訪問流量的時候,僅僅通過服務端的監控手段,是無法洞察到的,必須依賴於客戶端的實時監控數據上報。通過 ARMS 前端監控,核桃編程能從頁面生產時(服務器端狀態)、頁面加載時和頁面運行時這三個方面,全面瞭解到每一個應用系統端到端的健康程度。
6.png
特別重要的是,ARMS 前端監控能夠從地理位置、瀏覽器、操作系統、分辨率、網絡運營商、應用版本等多個維護,對性能指標進行聚合分析,從而幫助核桃編程更好地定位性能瓶頸。

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

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

在熟練掌握 ARMS 提供的前端可觀測性能力之後,核桃編程開始把前端頁面健康度指標作為日常業務迭代的檢測標準,這項工作是通過與所有業務線的灰度發佈計劃相互配合而進行的。對於生產環境的每一次版本升級,核桃編程都會通過灰度發佈的方式實現,先將小規模的用戶流量導入新版本進行功能性、穩定性、健康性驗證,只有滿足預先定義的各項指標後,才會逐步增加導入新版本的用戶流量,否則會立即對版本進行回滾。前端健康度的各種指標都是非常重要的衡量維度,而這些指標僅僅通過版本發佈前的常規測試手段,是沒有辦法全面採集到的。核桃編程將前端健康度納入業務迭代的衡量標準,體現著業務迭代過程中的可灰度、可觀測、可回滾,這也是在阿里巴巴廣為推崇的安全生產三板斧原則。

7.png

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *