背景

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

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

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

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

靈活低成本的接入方式，適配多廠(chǎng)商、多框架

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

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

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

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

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

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

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

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

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

平臺(tái)能力概覽

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

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

2. 分析問(wèn)題：

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

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

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

典型應(yīng)用場(chǎng)景

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

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

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

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

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

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

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

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

多平臺(tái)數(shù)據(jù)對(duì)比

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