背景
小程式作為輕量級的應用發展迅速，國内已有多家小程式廠商相繼推出。為了洞察使用者真實體驗及程式自身運作狀況，監控已成為開發套件中必不可少的一環。随着業務愈來愈複雜，各廠商小程式管理背景免費提供的監控能力逐漸滿足不了大部分業務與市場的需求。目前有小程式監控需求的使用者都面臨以下痛點：
- 僅支援 1 ~ 2 個小程式平台，不支援主流小程式跨端開發架構，如 uni-app 和 Taro。
- 異常監控、請求監控、啟動/運作時性能監控能力薄弱。
- SDK 配置繁瑣、體積大、性能損耗高，接入成本高。
基于以上痛點，火山引擎 APM 團隊針對小程式監控的的需求場景進行探索，再經過位元組跳動内部多條業務線應用沉澱和多輪疊代，打造出了一站式小程式監控平台，旨在為開發者提供可跨平台、監控能力完善、簡單易用的小程式監控服務。
火山引擎小程式監控的功能亮點
靈活低成本的接入方式，适配多廠商、多架構
- 支援抖音、微信、支付寶、百度、飛書等多個廠商的原生小程式接入，也适配三方架構Uni App和Taro。
- 低成本接入，僅需兩行代碼即可完成初始化。
- 性能損耗可控，中高端機型完全初始化僅需 7 ~ 12 ms。
- 支援按需加載适配層以及內建子產品，且包含豐富的生命周期，滿足不同業務場景的自定義配置需求。
完善的啟動和運作時性能名額體系
- 小程式啟動過程是指從使用者打開小程式至小程式首頁渲染完成。 SDK 側會收集該階段全部名額，包括下載下傳耗時、JS注入耗時、App 各階段耗時、首次 Page 各階段耗時、FR(firstRender)、FP(firstPaint)、FCP(firstContentfulPaint) 等等正常性能名額。
- 運作時性能包括頁面切換性能、setData 性能
- setData 性能：包括 setData 次數、耗時、頻率以及大小。
- 小程式頁面切換過程是指從使用者觸發路由切換事件至新頁面渲染完成。SDK 側會收集該階段全部名額，包括路由切換耗時、頁面建構耗時、頁面渲染耗時、FR、FP、FCP 等等正常性能名額。
從小程式啟動到頁面切換，我們不僅有完善的性能名額體系，而且各項名額均可在「自定義看闆」中進行任意組合以滿意業務方的個性化需求。除此之外，位元組内部根據實踐經驗預定義了一套預設參考線，當然也支援使用者根據業務自身複雜程度來動态調整參考線。
平台能力概覽
1. 發現問題：通過配置JS 錯誤或性能報警來第一時間洞察線上運作狀況，也可通過看闆訂閱的方式定時推送可視化圖表發送至你的郵箱或其他方式。
2. 分析問題：
- 異常問題：通過 sourcemap 反解将晦澀難懂的錯誤堆棧還原至開發環境，再通過資料探索回溯發生錯誤前的使用者操作行為，包括網絡請求、路由跳轉、setData 調用等等，幫你更快速定位問題所在。
- 性能問題：配合預設名額參考線，性能監控總覽能直覺展示啟動 / 運作時性能在某段時間内的達标程度，然後針對于異常名額，進入資料探索進一步下鑽至單次 Session 資訊，Session 囊括了首屏冷啟動階段、頁面渲染階段等等，直覺展示線上真實使用者體驗的瀑布圖，助你更快發現性能根因所在。
3. 效果驗證：品質優化上線後，可通過以下功能來靈活量化和驗證優化效果。
- 天級報表：位元組工程師在提升前端應用品質的過程中，預設計的一系列與業務目标強相關的名額看闆。以天為粒度展示所選時間周期内小程式的表現分以及各核心名額的趨勢圖，可直覺對比品質優化前後核心名額的變化。
- 自定義看闆：使用者可靈活配置各項性能或異常名額，并可自定義時間次元來觀測品質優化前後核心名額的變化。
典型應用場景
觀察并改進頁面性能
「性能監控」提供以冷啟動總耗時、小程式初始化耗時、下載下傳耗時、JS注入耗時等多項名額并按照 AVG、PTC75、PTC90、PCT95排序得出性能欠佳頁面和劣化Top 5，幫助您更好的發現和定位優化對象。
而後，我們支援更進一步的資料下鑽與現場複原，進入「資料探索」下的「Session Tab」具體檢視某單次會話的詳細資訊。
同時，針對單個會話的某次頁面通路，我們可以在「View Tab」中通過「啟動性能名額」和「資源加載瀑布圖」觀察到首次冷啟動的完整鍊路，進而找出問題關鍵。
結合「Session Tab」和「View Tab」視圖，我們初步判斷：該頁面的 FCP 與網絡請求 user_info 以及響應回調中的 setData 是強相關，以此來推動該請求速度的優化或 setData 邏輯優化。
多平台資料對比
目前很多企業在不同小程式平台均有釋出小程式，需要快速知道多個小程式平台的業務差異，則可使用「自定義看闆」，支援使用者靈活配置名額和圖表形式，幫助您管理高頻使用的圖表，自主設計業務大盤。例如對不同廠商的小程式進行資料對比。
- 使用者資料對比：包括 PV、UV、手機型号、系統等等使用者相關資料，統一呈現，橫向對比。
- 基礎性能資料對比：得益于适配層的架構，SDK 在收集側統一了所有小程式廠商的基礎性能資料。例如首屏加載總耗時、頁面跳轉總耗時等等。
作者:陳金夥
來源:微信公衆号:位元組跳動終端技術
出處:https://mp.weixin.qq.com/s/nfB0ORgFqljXhFVqOMDBWA