1. 程式人生 > >從前端程式設計師的視角看小程式的穩定性保障

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

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

小程式與 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 前端監控提供的小程式監控可幫助客戶實時監控發現質量問題,為企業的小程式的穩定執行提供堅實的保障。

附錄:

作者: 中介軟體小哥
原文連結
本文為雲棲社群原創內容,未經