微信小程式錯誤監控方法談

蒲公英開發者服務平臺發表於2018-02-06

對於小程式開發者來說,如何進行錯誤監控一直是個頭疼的問題。由於小程式開發迭代較快,會存在系統問題,機型問題和版本的相容問題,有時候我們在自行測試中完美執行,可總是有使用者抱怨使用異常。如果我們對小程式的錯誤進行有效的監控,可以幫助小程式開發者發現異常,優化程式碼,使用者體驗也會隨著優化逐步的提升。

作為一個小程式開發者,如果你對前端開發比較熟悉,那麼在錯誤監控方面可能會更快的上手。因為小程式錯誤監控和 Web 端錯誤監控本身就具有很多相似性,因此監控的資料規則基本是一致的,但由於小程式自身的特性,在錯誤監控方面會有以下不同:

  • 在 Web 端我們監測的是頁面完整的url,而小程式端監測的是路由地址;

  • 小程式頁面屬於微信內部的頁面,使用時已全部載入完畢,因此監控頁面效能時不統計頁面載入時長等資訊,更多的是對頁面內請求、資源請求和使用者行為的監控;

  • 由於微信官方和小程式程式碼的要求,整合方式對比 Web 端會相對嚴格一些。


根據以上的相同點和不同點,我們可以整理出對於小程式而言,哪些資料是需要監控的:

  • JavaScript異常監控:不論是 Web 端還是小程式端,對JavaScript異常的監控都是必要的;

  • 頁面內請求監控:對於小程式來說,我們需要統計傳送網路請求的wx.request()異常時的請求狀態、請求時長、請求地址等;

  • 資源載入監控:當需要下載資源到本地的wx.downloadFile() 出現異常時,統計載入時間、異常型別、資源地址等;

  • 頁面效能監控:訪問監控、頁面來源及流向監控等,方便我們更好的對小程式進行運營;

  • 使用者資料統計:使用者的分佈、作業系統及版本、微信版本、IP 地址等,給錯誤的分析提供更多條件。

對於小程式出現的錯誤,我們目前只能在開發者工具上進行追蹤和除錯,有條件的開發者也可以選擇在真機上進行除錯,但是小程式大多還是小團隊和個人開發者,擁有不同作業系統,不同型號,不同版本的真機進行除錯還是不太現實,這裡就可能會出現在本地除錯中沒有出現的問題,且很難定位的到。

在目前的微信小程式後臺中,對於上面後兩點的監控和統計已經可以實現,使用者資料的分析也比較完善,但是對於錯誤的監控目前還無法實現,這裡我們可以藉助第三方工具來進行對錯誤的監控。

這裡我們選擇錯誤監控平臺 FrontJS 的小程式錯誤監控:www.frontjs.com/

FrontJS 的小程式錯誤監控相比於微信小程式後臺的資料監控,增加了對於錯誤的統計和產生錯誤的相關使用者分析,FrontJS可以收集精細到console.log級別的任何JavaScript異常資訊並提供 stack trace 資訊;對於任何一條錯誤資訊或訪問,它都會統計到該使用者的IP、螢幕解析度、DPR、作業系統型別和微信版本,方便我們更有針對性的去除錯出現的錯誤。

使用時我們只需引入 FrontJS 外掛,並新增配置程式碼,即可開啟監控。

具體方法:

  • 進入 FrontJS 後註冊賬號,登陸後選擇建立專案,在建立專案頁面的名稱後選擇“微信小程式”。

微信小程式錯誤監控方法談

在這個頁面也可以對不監聽的資源和信任域進行設定。

建立完成後,我們只需要根據頁面右側的提示進行操作,就可以完成小程式錯誤監控的全部設定。

微信小程式錯誤監控方法談

整合完畢後就可以開始錯誤的監控了,具體介面如下,在左側選單欄中我們可以選擇不同的條件進行錯誤的篩選,具體內容各位可以親自嘗試。

微信小程式錯誤監控方法談

FrontJS對微信小程式下已有的相關方法進行了監聽,在出現異常或需要監控時,FrontJS會及時發現並統計資料,並且完全不影響小程式的正常執行。

在後續更新中,FrontJS 會繼續挖掘可監控到的資訊,如使用者的位置資訊,語言,基礎庫版本等,對這些資訊做更優處理,配合視覺化工具,開發者將可以構建出更符合自身需求的資料方案。

相關文章