如何從前端程式設計師的角度看小程式的穩定性保障

當我們談業務穩定性的時候，通常是指後端工程師從架構的角度來看的，例如限流和降級、流量調度、業​​務開關、容量壓測等，但監控也是整個業務穩定性建設中不可或缺的一環，例如對業務和前端的監控，以確保出現問題的時候，可以第一時間找到根因所在。今天，我們就結合小程式的場景，來看看如何做好小程式的監控。

小程式與 H5 的不同

小程式和 H5 都屬於行動裝置場景下的技術選擇方案，那麼這裡介紹一下小程式與 H5 的不同。

1、運行環境的不同

傳統的H5 的運行環境是瀏覽器，包括webview，其中瀏覽器提供window、document 等BOM 物件；

小程式的邏輯層和渲染層是分開的，邏輯層運行在JSCore 中，並沒有一個完整的瀏覽器對象，所以缺少相關的DOM API 和BOM API。

2、開發成本的不同

H5 的開發，涉及到開發工具、前端框架、模組管理工具、任務管理工具、UI 庫的選擇、接口呼叫工具及瀏覽器相容性等；

小程式的開發，指定環境的小程式會提供開發者工具、API 及規格的開發標準。由於小程式是跑在指定的環境下的，同時 API 是指定環境下提供的，所以不用考慮瀏覽器的相容性。

在 H5 開發中，前端常用的 HTML/CSS 在不同的小程式中都有指定的檔案標準。例如：

在微信小程式中使用WXML/WXSS；

在支付寶小程式、釘子E 應用中使用AXML/ACSS；

在百度智慧小程式中使用SWAN/CSS；

......

開發規範在指定的官方文件中都會有明確的使用介紹，使用方法與原來H5 的開發大同小異，所以上手開發相對容易。

3、使用體驗的不同

H5 頁面需要在瀏覽器中渲染，在複雜的業務邏輯或豐富的頁面互動時會有卡頓狀況；

小程式除首次使用略慢，頁面切換及跳轉等非常順滑，接近Native。

透過以上幾點小程式和H5 的不同的介紹，我們可以發現原來針對H5 頁面的監控無法直接監控小程式；同時由於小程式封閉性較強，不同的小程式在標準上也略有不同，如微信小程式、支付寶小程式及釘釘E 應用程式等等小程式在使用標準及開放的API 方面也會有一些差異，所以針對小程式的監控與針對Web 應用程式的監控會有所不同。

小程式監控的現況

現在針對小程式監控的大概分為以下幾類：

1、小程式的資料統計分析，助力小程式運作

相關產品: 微信小程式助手、阿拉丁小程式統計平台等；

特點：大部分是針對微信小程式提供對應的資料統計分析能力，從多維度分析小程式相關用戶數據，適用於小程式運營，但缺乏對於用戶體驗，小程式效能的監控。

2、小程式錯誤監控

相關產品: FunDebug 等；

特點：監控小程式使用者出現的錯誤，幫助開發者發現並解決小程式錯誤，但缺乏對於小程式全局效能的監控，對於緩慢請求，緩慢頁面沒辦法監測。

3、小程式效能監控

相關產品: FrontJS、聽雲小程式監控等；

特點：主要提供效能相關數據，包括JS 錯誤、網路請求響應情況等。但是只支援微信小程序，而且沒有辦法把小程式的效能與後台應用的效能關聯起來，沒辦法形成端到端的監控。

透過上面對現有的小程式監控產品分析，有以下問題：

無法支援所有的小程式監控，主要支援微信小程式；

支援多類小程式監控的產品，提供的小程式相關資料較少，主要集中在錯誤監控；

沒有後台應用程式服務的效能監控，無法從小程式上的效能問題追溯到後台應用程式碼和資料庫，無法形成端對端的監控。

基於以上情況，阿里雲 ARMS 前端監控重磅推出小程式監控，旨在幫助端到端的快速定位小程式問題，提升小程式的使用者體驗。

小程式監控提供的能力

阿里雲ARMS 前端監控此次重點推出的小程式監控有以下特點：

1、涵蓋各類符合標準規範的小程式

首先解釋這裡所說的"標準規範的小程式"，即包含App 和Page 兩層:

App 用來描述整體程序，包含: onError 事件；

Page 用來描述各個頁面，包含: onShow、onHide、onUnload 事件。

小程式的運作環境依賴對應的客戶端，各類小程式的 DSL 設計看起來很像，但細節上的差異還是比較多，並且已有了分化的趨勢。在這種情況下，阿里雲ARMS 前端監控為了更好的支援小程式的監控訴求，提供以下小程式監控的場景：

微信小程序
支付宝小程序
钉钉 E 应用
其他类别小程序

由於小程式發展迅速，現在無法針對各類小程式都提供對應的監控SDK，所以不屬於微信小程序、支付寶小程序和釘釘E 應用的小程序可選擇其他類別小程序的場景接入進行監控，但要滿足上面說的"標準規範的小程序"前提，同時支援npm 套件。

2、完善的效能監控指標

基礎業務指標，協助了解小程式應用程式的使用情況：

套用總PV/UV

頁面維度的PV/UV

小程式各維度指標：

手機型號

作業系統版本

微信/ 支付寶等對應的APP 版本

網路等

JS 錯誤分析：

JS 錯誤率、錯誤聚類、JS 錯誤堆疊及錯誤定位等

API 請求追蹤：

API 請求成功率、API 請求耗時及API 請求的連結追蹤

自訂事件統計資料

支援業務上自訂事件sum/avg 統計資料

3、可透過設定選擇上報方式

由於業務方使用監控的訴求不同，我們不僅支援優雅的靜默資料上報，也支援使用開放的統計能力進行自訂回報。具體可查看官網的前端監控存取概述中的小程式場景相關文件：

https://help.aliyun.com/document_detail/106086.html

#總結

小程式作為各大網路公司重磅加持的方向，未來小程式的應用數量會越來越多，那麼對於使用者體驗方面的關注與提升訴求也會不斷增加，阿里雲ARMS 前端監控提供的小程式監控可協助客戶即時監控發現品質問題，為企業的小程式的穩定運作提供堅實的保障。

以上是如何從前端程式設計師的角度看小程式的穩定性保障的詳細內容。更多資訊請關注PHP中文網其他相關文章！