簡介：在3年時(shí)間內(nèi)，技術(shù)團(tuán)隊(duì)至少對(duì)整體系統(tǒng)架構(gòu)進(jìn)行了6次以上的重大重構(gòu)，涉及微服務(wù)化、容器化、分布式數(shù)據(jù)庫等重要的技術(shù)，并嘗試通過Serverless技術(shù)提升系統(tǒng)的彈性伸縮能力。

作者：山獵，阿里云解決方案架構(gòu)師

根據(jù)《中國少兒編程行業(yè)研究報(bào)告》及《2017-2023 年中國少兒編程市場分析預(yù)測(cè)研究報(bào)告》預(yù)測(cè)得出，少兒編程有望在3-5年內(nèi)，達(dá)到少兒英語市場規(guī)模的一半，即500億左右，發(fā)展前景廣闊。

在信息化時(shí)代的今天，人工智能給人們帶來了巨大變化，新時(shí)代的家長處于互聯(lián)網(wǎng)時(shí)代，與上一代的家長思維產(chǎn)生較大的變化，能夠注重孩子的素質(zhì)教育，注重培養(yǎng)孩子人工智能方向的才能。少兒編程教育就是在這樣的背景下快速發(fā)展起來。

核桃編程是少兒編程教育行業(yè)的領(lǐng)導(dǎo)者，致力于以科技手段促進(jìn)編程教育，通過人工智能、自適應(yīng)學(xué)習(xí)等先進(jìn)技術(shù)和科學(xué)的教育方法，啟發(fā)中國孩子的學(xué)習(xí)能力。自2017年8月成立以來，核桃編程的業(yè)務(wù)量飛速發(fā)展，僅僅3年時(shí)間付費(fèi)學(xué)員人數(shù)就突破了200萬，并實(shí)現(xiàn)了單月營收過億。

隨著核桃編程業(yè)務(wù)的快速增長，核心應(yīng)用的系統(tǒng)規(guī)模和系統(tǒng)復(fù)雜度也在經(jīng)歷翻天覆地的變化。核桃技術(shù)團(tuán)隊(duì)不斷通過新興的技術(shù)手段維護(hù)整套系統(tǒng)架構(gòu)的技術(shù)先進(jìn)性。在3年時(shí)間里，技術(shù)團(tuán)隊(duì)至少對(duì)整體系統(tǒng)架構(gòu)進(jìn)行了6次以上的重大重構(gòu)，涉及微服務(wù)化、容器化、分布式數(shù)據(jù)庫等重要的技術(shù)，并嘗試通過Serverless技術(shù)提升系統(tǒng)的彈性伸縮能力。在疫情期間，當(dāng)系統(tǒng)負(fù)荷呈現(xiàn)數(shù)倍突增的情況下，核桃編程的系統(tǒng)架構(gòu)依然經(jīng)受住了考驗(yàn)。

隨著系統(tǒng)架構(gòu)從簡單變得復(fù)雜，有一個(gè)在互聯(lián)網(wǎng)領(lǐng)域老大難的問題也逐步在核桃編程中體現(xiàn)出來：如何提升分布式系統(tǒng)的可觀測(cè)性？在線上編程教學(xué)場景里面，用戶一個(gè)簡單的操作，就有可能涉及到前后端系統(tǒng)的多次交互，以及多個(gè)服務(wù)端微服務(wù)應(yīng)用之間的相互調(diào)用，甚至還會(huì)受到第三方服務(wù)接口的影響。任何一個(gè)環(huán)節(jié)出現(xiàn)故障或者性能瓶頸，都會(huì)導(dǎo)致用戶體驗(yàn)的斷崖式下跌，而用戶體驗(yàn)又是決定品牌形象的核心要素，所以對(duì)于核桃技術(shù)團(tuán)隊(duì)而言，保證優(yōu)秀的用戶體驗(yàn)需要在系統(tǒng)可觀測(cè)性建設(shè)上做到這幾個(gè)方面：

全面而且實(shí)時(shí)的了解系統(tǒng)每一個(gè)對(duì)外接口的性能質(zhì)量。

通過數(shù)據(jù)掌握最終用戶與系統(tǒng)交互時(shí)感受到的系統(tǒng)健康程度。

當(dāng)系統(tǒng)健康程度存在問題時(shí)，技術(shù)團(tuán)隊(duì)能第一時(shí)間發(fā)現(xiàn)問題，并及時(shí)處理。

處理問題時(shí)，能迅速定位到系統(tǒng)瓶頸和故障源。

任何一個(gè)技術(shù)團(tuán)隊(duì)要想圍繞著這幾個(gè)方面，從零開始建設(shè)分布式可觀測(cè)體系，都是一項(xiàng)非常艱巨的任務(wù)，好在業(yè)界對(duì)于分布式可觀測(cè)性的建設(shè)，已經(jīng)有了不少成熟的方法論以及開源項(xiàng)目可以參考。

業(yè)界廣泛認(rèn)可的可觀測(cè)性（observability）包含三個(gè)核心要素：Logging（離散的日志信息）、Metrics（聚合的指標(biāo)）、Distributed Tracing（分布式追蹤）。圍繞這三個(gè)核心要素，有不少開源項(xiàng)目可以進(jìn)行選擇，幫助開發(fā)者快速建設(shè)分布式可觀測(cè)體系。

通過引入Skywalking，Prometheus等開源技術(shù)，核桃技術(shù)團(tuán)隊(duì)建立了完整的分布式可觀測(cè)體系，能夠?qū)Ψ?wù)端復(fù)雜的微服務(wù)應(yīng)用實(shí)現(xiàn)全鏈路追蹤，并通過統(tǒng)一的日志服務(wù)體系收集分析業(yè)務(wù)日志。這樣的努力對(duì)于系統(tǒng)穩(wěn)定性以及用戶體驗(yàn)的提升是立竿見影的：當(dāng)系統(tǒng)服務(wù)端的任何一個(gè)環(huán)節(jié)出現(xiàn)故障或性能瓶頸的時(shí)候，技術(shù)團(tuán)隊(duì)都能第一時(shí)間得到通知，并快速定位問題，進(jìn)行針對(duì)性處理。

相對(duì)于成熟的服務(wù)端監(jiān)控技術(shù)，整個(gè)業(yè)界在客戶端監(jiān)控領(lǐng)域的技術(shù)方案一直比較欠缺。在互聯(lián)網(wǎng)上，海量的用戶使用不同廠家、不同操作系統(tǒng)、不同屏幕分辨率的終端設(shè)備，分布在不同的地域，又通過不同的網(wǎng)絡(luò)運(yùn)營商進(jìn)行接入，甚至存在復(fù)雜的第三方依賴，包括CDN、第三方統(tǒng)計(jì)腳本、頁面嵌套等方面。當(dāng)用戶體驗(yàn)遇到問題的時(shí)候，如果僅僅擁有服務(wù)端監(jiān)控手段，很難第一時(shí)間確認(rèn)問題的根源到底在于前端還是后端。即便能夠排除服務(wù)端的問題，前端用戶體驗(yàn)也受到頁面渲染、JavaScript執(zhí)行、網(wǎng)絡(luò)質(zhì)量、第三方接口服務(wù)質(zhì)量等方面的影響，為進(jìn)一步排查問題留下了非常多的挑戰(zhàn)。

一個(gè)簡單的思路是通過前端JavaScript做自定義的埋點(diǎn)，將最終用戶的各種行為實(shí)時(shí)上報(bào)給服務(wù)端進(jìn)行統(tǒng)計(jì)，以第一時(shí)間了解到用戶體驗(yàn)。這個(gè)思路本身是合理的，但業(yè)務(wù)埋點(diǎn)、數(shù)據(jù)采集、聚合分析、視圖展現(xiàn)等層面都有非常多的工作需要做，是一個(gè)浩大的工程。絕大多數(shù)技術(shù)團(tuán)隊(duì)而言，投入如此多的精力來建設(shè)這樣一套前端監(jiān)控方案都是不現(xiàn)實(shí)的。

建設(shè)前端可觀測(cè)體系，最好的捷徑是參考互聯(lián)網(wǎng)領(lǐng)域頭部企業(yè)的案例，選擇云計(jì)算廠商提供的完整方案。阿里巴巴多年實(shí)戰(zhàn)積累了一套全集團(tuán)統(tǒng)一的前端監(jiān)控方案，并開放給各個(gè)事業(yè)部接入。對(duì)于以HTML頁面形式呈現(xiàn)的前端應(yīng)用，不管是PC端/移動(dòng)端網(wǎng)站，嵌入到移動(dòng)端App的HTML5頁面，都可以通過無侵入的方式接入到這套前端監(jiān)控方案中。

這套監(jiān)控方案也同時(shí)通過阿里云對(duì)外輸出，成為阿里云可觀測(cè)性整體方案的重要組成部分，服務(wù)于廣大的外部用戶。

在客戶端監(jiān)控領(lǐng)域，包括ARMS前端監(jiān)控和APP監(jiān)控兩個(gè)產(chǎn)品，其中ARMS前端監(jiān)控專注于Web端體驗(yàn)數(shù)據(jù)監(jiān)控，從頁面打開速度、頁面穩(wěn)定性和外部服務(wù)調(diào)用成功率這三個(gè)方面監(jiān)測(cè)Web頁面的健康度，幫助使用者降低頁面加載時(shí)間、減少JS錯(cuò)誤，有效提升用戶體驗(yàn)。

這套方案正好能補(bǔ)齊核桃編程在客戶端監(jiān)控領(lǐng)域的能力缺失，所以核桃技術(shù)團(tuán)隊(duì)嘗試在一些業(yè)務(wù)線接入阿里云ARMS前端監(jiān)控。很快，他們就感受到了這套方案對(duì)于提升用戶體驗(yàn)所帶來的價(jià)值。

ARMS前端監(jiān)控方案之所以能被核桃編程采納，有一個(gè)很重要的原因是方案的接入是非常簡單的，唯一要做的事情是在客戶端HTML頁面的Body元素中加入一段由ARMS提供的統(tǒng)計(jì)接入腳本（一段JavaScript代碼），就能完成監(jiān)控?cái)?shù)據(jù)的自動(dòng)上報(bào)。這其中不涉及到任何跟業(yè)務(wù)層主動(dòng)埋點(diǎn)的工作，在核桃編程的多條業(yè)務(wù)線之間推廣起來是非常順利的。基于之前的經(jīng)驗(yàn)，凡是需要在業(yè)務(wù)層主動(dòng)埋點(diǎn)的監(jiān)控方案，都需要通過行政手段來保證多個(gè)研發(fā)團(tuán)隊(duì)在編寫代碼的時(shí)候遵守既定的規(guī)則，這樣的方式從長期來看都是很難落地的。包括在服務(wù)端全鏈路監(jiān)控方面，核桃編程也始終遵循業(yè)務(wù)無侵入的思路，避免主動(dòng)埋點(diǎn)行為。

接下來，研發(fā)人員就能從前端監(jiān)控控制臺(tái)全面了解應(yīng)用端到端的健康程度，包括PV/UV情況統(tǒng)計(jì)、頁面加載速度情況、JavaScript執(zhí)行情況，API請(qǐng)求成功率等多個(gè)方面。以頁面加載速度為例，ARMS可以基于客戶端自動(dòng)上報(bào)的監(jiān)控?cái)?shù)據(jù)，實(shí)時(shí)展示每一個(gè)頁面的加載情況。

其中，首次渲染時(shí)間、首屏?xí)r間、Dom Ready等指標(biāo)都是HTML頁面獨(dú)有的性能指標(biāo)，遵循業(yè)務(wù)標(biāo)準(zhǔn)的指標(biāo)定義。這些指標(biāo)數(shù)據(jù)和前端頁面健康程度息息相關(guān)，影響著最終用戶每一次交互行為的實(shí)際體驗(yàn)。

通過頁面加載瀑布圖，能夠按照頁面加載的順序，直觀地展示各階段的耗時(shí)情況。這些指標(biāo)參數(shù)涵蓋了網(wǎng)絡(luò)層面的性能指標(biāo)，當(dāng)網(wǎng)絡(luò)層面出現(xiàn)性能瓶頸，比如應(yīng)用系統(tǒng)的接入帶寬不能支撐用戶訪問流量的時(shí)候，僅僅通過服務(wù)端的監(jiān)控手段，是無法洞察到的，必須依賴于客戶端的實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)上報(bào)。通過ARMS前端監(jiān)控，核桃編程能從頁面生產(chǎn)時(shí)（服務(wù)器端狀態(tài)）、頁面加載時(shí)和頁面運(yùn)行時(shí)這三個(gè)方面，全面了解到每一個(gè)應(yīng)用系統(tǒng)端到端的健康程度。

特別重要的是，ARMS前端監(jiān)控能夠從地理位置、瀏覽器、操作系統(tǒng)、分辨率、網(wǎng)絡(luò)運(yùn)營商、應(yīng)用版本等多個(gè)維護(hù)，對(duì)性能指標(biāo)進(jìn)行聚合分析，從而幫助核桃編程更好地定位性能瓶頸。比如地理分布視圖就能通過對(duì)地理位置的聚合分析，展現(xiàn)全國每一個(gè)省的頁面首次渲染平均時(shí)間。當(dāng)某一個(gè)地域的CDN出現(xiàn)故障的時(shí)候，地理分布視圖能幫助核桃編程迅速定位問題的根源，而傳統(tǒng)的監(jiān)控手段是完全沒有辦法覆蓋這類場景的。

JavaScript錯(cuò)誤分析和API請(qǐng)求分析也是核桃編程在應(yīng)用系統(tǒng)的日常維護(hù)中非常關(guān)心的頁面健康度指標(biāo)。前者可以展示JavaScript錯(cuò)誤的基本信息和分布情況，并具備回溯用戶行為的能力。后者可以展示每個(gè)API的調(diào)用情況，包括調(diào)用成功率、返回信息、調(diào)用成功或失敗的平均耗時(shí)等。當(dāng)前端頁面完全載入后，用戶的操作會(huì)涉及到復(fù)雜的JavaScript執(zhí)行，并在頁面觸發(fā)多個(gè)API調(diào)用，其中還包括對(duì)第三方提供的接口調(diào)用。

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

在熟練掌握ARMS提供的前端可觀測(cè)性能力之后，核桃編程開始把前端頁面健康度指標(biāo)作為日常業(yè)務(wù)迭代的檢測(cè)標(biāo)準(zhǔn)，這項(xiàng)工作是通過與所有業(yè)務(wù)線的灰度發(fā)布計(jì)劃相互配合而進(jìn)行的。對(duì)于生產(chǎn)環(huán)境的每一次版本升級(jí)，核桃編程都會(huì)通過灰度發(fā)布的方式實(shí)現(xiàn)，先將小規(guī)模的用戶流量導(dǎo)入新版本進(jìn)行功能性、穩(wěn)定性、健康性驗(yàn)證，只有滿足預(yù)先定義的各項(xiàng)指標(biāo)后，才會(huì)逐步增加導(dǎo)入新版本的用戶流量，否則會(huì)立即對(duì)版本進(jìn)行回滾。前端健康度的各種指標(biāo)都是非常重要的衡量維度，而這些指標(biāo)僅僅通過版本發(fā)布前的常規(guī)測(cè)試手段，是沒有辦法全面采集到的。核桃編程將前端健康度納入業(yè)務(wù)迭代的衡量標(biāo)準(zhǔn)，體現(xiàn)著業(yè)務(wù)迭代過程中的可灰度、可觀測(cè)、可回滾，這也是在阿里巴巴廣為推崇的安全生產(chǎn)三板斧原則。

除了通過ARMS控制臺(tái)主動(dòng)的觀察分析，掌握各項(xiàng)前端業(yè)務(wù)指標(biāo)之外，更重要的事情是在遇到用戶體驗(yàn)問題時(shí)，如何第一時(shí)間得到通知和告警，防患于未然。這個(gè)訴求通過ARMS完善的報(bào)警機(jī)制可以輕松實(shí)現(xiàn)。核桃基于自身對(duì)前端健康度的理解，以及業(yè)界通用的方法論，創(chuàng)建了多種維度的報(bào)警規(guī)則，比如“最近5鐘內(nèi)平均頁面首次渲染耗時(shí)大于1秒”等。當(dāng)規(guī)則被觸發(fā)時(shí)，系統(tǒng)會(huì)以預(yù)先指定的報(bào)警方式向報(bào)警聯(lián)系人分組發(fā)送報(bào)警信息，以提醒技術(shù)團(tuán)隊(duì)及時(shí)解決。這些報(bào)警規(guī)則再配合上對(duì)生產(chǎn)故障的分級(jí)分類定義，能夠幫助核桃技術(shù)團(tuán)隊(duì)建立一整套生產(chǎn)故障應(yīng)對(duì)機(jī)制，真正實(shí)現(xiàn)實(shí)線上問題5分鐘內(nèi)發(fā)現(xiàn)，10分鐘內(nèi)隔離，30分鐘內(nèi)解決。

核桃編程還積極探索前后端統(tǒng)一鏈路追蹤技術(shù)，將API請(qǐng)求從前端發(fā)出到后端調(diào)用的鏈路串聯(lián)起來，真實(shí)還原代碼執(zhí)行的完整現(xiàn)場。這是通過對(duì)前端API請(qǐng)求自動(dòng)注入Trace信息而實(shí)現(xiàn)，ARMS前端監(jiān)控能夠在允許API自動(dòng)上報(bào)的前提下，在API請(qǐng)求的Request Header中加入自動(dòng)生成的TraceID，作為串聯(lián)前后端鏈路的標(biāo)識(shí)。這樣通過調(diào)用的時(shí)間軸，可以知道是網(wǎng)絡(luò)傳輸還是后端調(diào)用導(dǎo)致請(qǐng)求耗時(shí)時(shí)間過長，進(jìn)一步通過后端應(yīng)用的線程剖析功能，可以洞察每次請(qǐng)求后端的完整調(diào)用鏈路，對(duì)于排查系統(tǒng)故障和性能瓶頸帶來了非常大的幫助。

完善的前端可觀測(cè)體系在幫助核桃編程減少了30%以上的運(yùn)維工作量的同時(shí)，還縮短了60%以上的故障定位平均耗時(shí)，極大地提升了用戶體驗(yàn)，為業(yè)務(wù)持續(xù)發(fā)展打下了堅(jiān)實(shí)的基礎(chǔ)。核桃技術(shù)團(tuán)隊(duì)將基于自身的技術(shù)特點(diǎn)，繼續(xù)探索更多前沿的云原生技術(shù)，充分享受云計(jì)算帶來的紅利。

核桃編程正在招聘業(yè)務(wù)架構(gòu)師、運(yùn)維架構(gòu)師，核桃編程通過優(yōu)質(zhì)的課程內(nèi)容和首創(chuàng)的AI人機(jī)雙師互動(dòng)學(xué)習(xí)輔導(dǎo)系統(tǒng)，現(xiàn)已成為國內(nèi)外領(lǐng)先的少兒編程教育公司，產(chǎn)品技術(shù)團(tuán)隊(duì)多來自于阿里巴巴、百度等頂尖互聯(lián)網(wǎng)公司；課程研發(fā)團(tuán)隊(duì)全部出身雙一流高校，同時(shí)還匯集了兒童心理及行為研究等領(lǐng)域的頂尖人才。

歡迎感興趣的架構(gòu)師投遞簡歷至郵箱：donghuasong@hetao101.com

掃碼了解更多技術(shù)內(nèi)容與客戶案例：

原文鏈接：https://developer.aliyun.com/article/781396?

版權(quán)聲明：本文內(nèi)容由阿里云實(shí)名注冊(cè)用戶自發(fā)貢獻(xiàn)，版權(quán)歸原作者所有，阿里云開發(fā)者社區(qū)不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。具體規(guī)則請(qǐng)查看《阿里云開發(fā)者社區(qū)用戶服務(wù)協(xié)議》和《阿里云開發(fā)者社區(qū)知識(shí)產(chǎn)權(quán)保護(hù)指引》。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容，填寫侵權(quán)投訴表單進(jìn)行舉報(bào)，一經(jīng)查實(shí)，本社區(qū)將立刻刪除涉嫌侵權(quán)內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的核桃编程 | 前端可观测性建设之路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。