頻道欄目
首頁 > 資訊 > 微信小程序 > 正文

從前端程序員的視角看小程序的穩定性保障-教程-小程序社區-微信小程序-微信小程序開發社區-小程序開發論壇-微信小程序聯盟

19-03-07        來源:[db:作者]  
收藏   我要投稿

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

本文轉載至InfoQ大前端技術號「前端之巔」,作者慕扉,阿里巴巴高級前端工程師。

小程序與 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

                              赞赏
相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片