從前端程序員的視角看小程序的穩定性保障

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

小程序與 H5 的不一樣

小程序和 H5 都屬於移動端場景下的技術選擇方案，那麼這裏介紹一下小程序與 H5 的不一樣。

一、運行環境的不一樣

• 傳統的 H5 的運行環境是瀏覽器，包括 webview，其中瀏覽器提供 window、document 等 BOM 對象；
• 小程序的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，並無一個完整的瀏覽器對象，因此缺乏相關的 DOM API 和 BOM API。

二、開發成本的不一樣

• H5 的開發，涉及到開發工具、前端框架、模塊管理工具、任務管理工具、UI 庫的選擇、接口調用工具及瀏覽器兼容性等；
• 小程序的開發，指定環境的小程序會提供開發者工具、API 及規範的開發標準。因爲小程序是跑在指定的環境下的，同時 API 是指定環境下提供的，因此不用考慮瀏覽器的兼容性。

在 H5 開發中，前端經常使用的 HTML/CSS 在不一樣的小程序中都有指定的文件標準。例如：

• 在微信小程序中使用 WXML/WXSS；
• 在支付寶小程序、釘釘 E 應用中使用 AXML/ACSS；
• 在百度智能小程序中使用 SWAN/CSS；
  ......

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

三、使用體驗的不一樣

• H5 頁面須要在瀏覽器中渲染，在複雜的業務邏輯或者豐富的頁面交互時會有卡頓狀況；
• 小程序除首次使用略慢，頁面切換及跳轉等很是順滑，接近 Native。

經過以上幾點小程序和 H5 的不一樣的介紹，咱們能夠發現原來針對 H5 頁面的監控沒法直接監控小程序；同時因爲小程序封閉性較強，不一樣的小程序在標準上也略有不一樣，如微信小程序、支付寶小程序及釘釘 E 應用等等小程序在使用標準及開放的 API 方面也會有一些差別，因此針對小程序的監控與針對 Web 應用的監控會有所不一樣。

小程序監控的現狀

如今針對小程序監控的大概分爲如下幾類：

一、小程序的數據統計分析，助力小程序運營

• 相關產品: 微信小程序助手、阿拉丁小程序統計平臺等；
• 特色：大部分是針對微信小程序提供相應的數據統計分析能力，從多維度分析小程序相關用戶數據，適用於小程序運營，但缺少對於用戶體驗，小程序性能的監控。

二、小程序錯誤監控

• 相關產品: FunDebug 等；
• 特色：監控小程序使用戶出現的錯誤，幫助開發者發現並解決小程序錯誤，但缺少對於小程序全局性能的監控，對於緩慢請求，緩慢頁面無法監測。

三、小程序性能監控

• 相關產品: FrontJS、聽雲小程序監控等；
• 特色：主要提供性能相關數據，包括 JS 錯誤、網絡請求響應狀況等。可是隻支持微信小程序，並且沒有辦法把小程序的性能與後臺應用的性能關聯起來，無法造成端到端的監控。

經過上面對現有的小程序監控產品分析，存在如下問題：

• 沒法支持全部的小程序監控，主要支持微信小程序；
• 支持多類小程序監控的產品，提供的小程序相關數據較少，主要集中在錯誤監控；
• 沒有後臺應用服務的性能監控，沒法從小程序上的性能問題追溯到後臺應用代碼和數據庫，沒法造成端到端的監控。

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

小程序監控提供的能力

阿里雲 ARMS 前端監控這次重點推出的小程序監控有如下特色：

一、覆蓋各種符合標準規範的小程序
首先解釋一下這裏所說的"標準規範的小程序"，即包含 App 和 Page 兩層:

• App 用來描述總體程序，包含: onError 事件；
• Page 用來描述各個頁面，包含: onShow、onHide、onUnload 事件。

小程序的運行環境依賴於對應的客戶端，各種小程序的 DSL 設計看起來很像，但細節上的差異仍是比較多，而且已有了分化的趨勢。在這種狀況下，阿里雲 ARMS 前端監控爲了更好的支持小程序的監控訴求，提供如下小程序監控的場景：

• 微信小程序
• 支付寶小程序
• 釘釘 E 應用
• 其餘類別小程序

因爲小程序發展迅速，如今沒法針對各種小程序都提供對應的監控 SDK，因此不屬於微信小程序、支付寶小程序和釘釘 E 應用的小程序可選擇其餘類別小程序的場景接入進行監控，但要知足上面說的"標準規範的小程序"前提，同時支持 npm 包。

二、完善的性能監控指標
基礎業務指標，幫助瞭解小程序應用的使用狀況：

• 應用總 PV/UV
• 頁面維度的 PV/UV

小程序各維度指標：

• 手機型號
• 操做系統版本
• 微信 / 支付寶等相應的 APP 版本
• 網絡等

JS 錯誤分析：

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

API 請求追蹤：

• API 請求成功率、API 請求耗時及 API 請求的鏈路追蹤
• 自定義事件統計
• 支持業務上自定義事件 sum/avg 統計

三、可經過配置選擇上報方式
因爲業務方使用監控的訴求不一樣，咱們不只支持優雅的靜默數據上報，也支持使用開放的統計能力進行自定義上報。具體可查看官網的前端監控接入概述中的小程序場景相關文檔：

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

總結

小程序做爲各大互聯網公司重磅加持的方向，將來小程序的應用數量會愈來愈多，那麼對於用戶體驗方面的關注與提高訴求也會不斷增長，阿里雲 ARMS 前端監控提供的小程序監控可幫助客戶實時監控發現質量問題，爲企業的小程序的穩定運行提供堅實的保障。

#阿里雲開年Hi購季#幸運抽好禮！
點此抽獎：https://www.aliyun.com/acts/product-section-2019/yq-lottery?utm_content=g_1000042901

原文連接本文爲雲棲社區原創內容，未經容許不得轉載。