背景

小程序作為輕量級的應(yīng)用發(fā)展迅速，國內(nèi)已有多家小程序廠商相繼推出。為了洞察用戶真實(shí)體驗(yàn)及程序自身運(yùn)行狀況，監(jiān)控已成為開發(fā)套件中必不可少的一環(huán)。隨著業(yè)務(wù)愈來愈復(fù)雜，各廠商小程序管理后臺免費(fèi)提供的監(jiān)控能力逐漸滿足不了大部分業(yè)務(wù)與市場的需求。當(dāng)前有小程序監(jiān)控需求的用戶都面臨以下痛點(diǎn)：

僅支持 1 ~ 2 個(gè)小程序平臺，不支持主流小程序跨端開發(fā)框架，如 uni-app 和 Taro。
異常監(jiān)控、請求監(jiān)控、啟動/運(yùn)行時(shí)性能監(jiān)控能力薄弱。
SDK 配置繁瑣、體積大、性能損耗高，接入成本高。

基于以上痛點(diǎn)，火山引擎 APM 團(tuán)隊(duì)針對小程序監(jiān)控的的需求場景進(jìn)行探索，再經(jīng)過字節(jié)跳動內(nèi)部多條業(yè)務(wù)線應(yīng)用沉淀和多輪迭代，打造出了一站式小程序監(jiān)控平臺，旨在為開發(fā)者提供可跨平臺、監(jiān)控能力完善、簡單易用的小程序監(jiān)控服務(wù)。

火山引擎小程序監(jiān)控的功能亮點(diǎn)

靈活低成本的接入方式，適配多廠商、多框架

支持抖音、微信、支付寶、百度、飛書等多個(gè)廠商的原生小程序接入，也適配三方框架Uni App和Taro。
低成本接入，僅需兩行代碼即可完成初始化。
性能損耗可控，中高端機(jī)型完全初始化僅需 7 ~ 12 ms。
支持按需加載適配層以及集成模塊，且包含豐富的生命周期，滿足不同業(yè)務(wù)場景的自定義配置需求。

火山引擎推出一站式小程序監(jiān)控方案（火山引擎app）

完善的啟動和運(yùn)行時(shí)性能指標(biāo)體系

小程序啟動過程是指從用戶打開小程序至小程序首頁渲染完成。 SDK 側(cè)會收集該階段全部指標(biāo)，包括下載耗時(shí)、JS注入耗時(shí)、App 各階段耗時(shí)、首次 Page 各階段耗時(shí)、FR(firstRender)、FP(firstPaint)、FCP(firstContentfulPaint) 等等常規(guī)性能指標(biāo)。

火山引擎推出一站式小程序監(jiān)控方案（火山引擎app）

運(yùn)行時(shí)性能包括頁面切換性能、setData 性能

setData 性能：包括 setData 次數(shù)、耗時(shí)、頻率以及大小。
小程序頁面切換過程是指從用戶觸發(fā)路由切換事件至新頁面渲染完成。SDK 側(cè)會收集該階段全部指標(biāo)，包括路由切換耗時(shí)、頁面構(gòu)建耗時(shí)、頁面渲染耗時(shí)、FR、FP、FCP 等等常規(guī)性能指標(biāo)。

火山引擎推出一站式小程序監(jiān)控方案（火山引擎app）

從小程序啟動到頁面切換，我們不僅有完善的性能指標(biāo)體系，而且各項(xiàng)指標(biāo)均可在「自定義看板」中進(jìn)行任意組合以滿意業(yè)務(wù)方的個(gè)性化需求。除此之外，字節(jié)內(nèi)部根據(jù)實(shí)踐經(jīng)驗(yàn)預(yù)定義了一套默認(rèn)參考線，當(dāng)然也支持用戶根據(jù)業(yè)務(wù)自身復(fù)雜程度來動態(tài)調(diào)整參考線。

平臺能力概覽

火山引擎推出一站式小程序監(jiān)控方案（火山引擎app）

1. 發(fā)現(xiàn)問題：通過配置JS 錯(cuò)誤或性能報(bào)警來第一時(shí)間洞察線上運(yùn)行狀況，也可通過看板訂閱的方式定時(shí)推送可視化圖表發(fā)送至你的郵箱或其他方式。

2. 分析問題：

異常問題：通過 sourcemap 反解將晦澀難懂的錯(cuò)誤堆棧還原至開發(fā)環(huán)境，再通過數(shù)據(jù)探索回溯發(fā)生錯(cuò)誤前的用戶操作行為，包括網(wǎng)絡(luò)請求、路由跳轉(zhuǎn)、setData 調(diào)用等等，幫你更快速定位問題所在。
性能問題：配合默認(rèn)指標(biāo)參考線，性能監(jiān)控總覽能直觀展示啟動 / 運(yùn)行時(shí)性能在某段時(shí)間內(nèi)的達(dá)標(biāo)程度，然后針對于異常指標(biāo)，進(jìn)入數(shù)據(jù)探索進(jìn)一步下鉆至單次 Session 信息，Session 囊括了首屏冷啟動階段、頁面渲染階段等等，直觀展示線上真實(shí)用戶體驗(yàn)的瀑布圖，助你更快發(fā)現(xiàn)性能根因所在。

3. 效果驗(yàn)證：品質(zhì)優(yōu)化上線后，可通過以下功能來靈活量化和驗(yàn)證優(yōu)化效果。

天級報(bào)表：字節(jié)工程師在提升前端應(yīng)用品質(zhì)的過程中，預(yù)設(shè)計(jì)的一系列與業(yè)務(wù)目標(biāo)強(qiáng)相關(guān)的指標(biāo)看板。以天為粒度展示所選時(shí)間周期內(nèi)小程序的表現(xiàn)分以及各核心指標(biāo)的趨勢圖，可直觀對比品質(zhì)優(yōu)化前后核心指標(biāo)的變化。
自定義看板：用戶可靈活配置各項(xiàng)性能或異常指標(biāo)，并可自定義時(shí)間維度來觀測品質(zhì)優(yōu)化前后核心指標(biāo)的變化。

典型應(yīng)用場景

觀察并改進(jìn)頁面性能

「性能監(jiān)控」提供以冷啟動總耗時(shí)、小程序初始化耗時(shí)、下載耗時(shí)、JS注入耗時(shí)等多項(xiàng)指標(biāo)并按照 AVG、PTC75、PTC90、PCT95排序得出性能欠佳頁面和劣化Top 5，幫助您更好的發(fā)現(xiàn)和定位優(yōu)化對象。

火山引擎推出一站式小程序監(jiān)控方案（火山引擎app）

而后，我們支持更進(jìn)一步的數(shù)據(jù)下鉆與現(xiàn)場復(fù)原，進(jìn)入「數(shù)據(jù)探索」下的「Session Tab」具體查看某單次會話的詳細(xì)信息。

火山引擎推出一站式小程序監(jiān)控方案（火山引擎app）

同時(shí)，針對單個(gè)會話的某次頁面訪問，我們可以在「View Tab」中通過「啟動性能指標(biāo)」和「資源加載瀑布圖」觀察到首次冷啟動的完整鏈路，從而找出問題關(guān)鍵。

火山引擎推出一站式小程序監(jiān)控方案（火山引擎app）

結(jié)合「Session Tab」和「View Tab」視圖，我們初步判斷：該頁面的 FCP 與網(wǎng)絡(luò)請求 user_info 以及響應(yīng)回調(diào)中的 setData 是強(qiáng)相關(guān)，以此來推動該請求速度的優(yōu)化或 setData 邏輯優(yōu)化。

多平臺數(shù)據(jù)對比

當(dāng)前很多企業(yè)在不同小程序平臺均有發(fā)布小程序，需要快速知道多個(gè)小程序平臺的業(yè)務(wù)差異，則可使用「自定義看板」，支持用戶靈活配置指標(biāo)和圖表形式，幫助您管理高頻使用的圖表，自主設(shè)計(jì)業(yè)務(wù)大盤。例如對不同廠商的小程序進(jìn)行數(shù)據(jù)對比。