小程序異常監控收集

web端與小程序錯誤監控差異

在 Web 端監測的是頁面完整的 url，而小程序端監測的是路由地址；
小程序頁面屬于app內部的頁面，使用時已全部加載完畢，因此監控頁面性能時不統計頁面加載時長等信息，更多的是對頁面內請求、資源請求和用戶行為的監控；
由于微信官方和小程序代碼的要求，集成方式對比 Web 端會相對嚴格一些。

小程序需要監控的數據

JavaScript異常監控：不論是 Web 端還是小程序端，對 JavaScript 異常的監控都是必要的；
頁面內請求監控：對于小程序來說，需要統計發送網絡請求的 swan.request() 異常時的請求狀態、請求時長、請求地址等；
資源加載監控：當需要下載資源到本地的 swan.downloadFile() 出現異常時，統計加載時間、異常類型、資源地址等；
頁面性能監控：訪問監控、頁面來源及流向監控等，方便更好的對小程序進行運營；
用戶數據統計：用戶的分布、操作系統及版本、app版本、IP 地址等，給錯誤的分析提供更多條件。

簡單收集

小程序App()生命周期里提供了onError函數，可以通過在onError里收集異常信息，具體原理可查看JS實現監控微信小程序的原理

  App({
      // 監聽錯誤
      onError: function (err) {
          // 上報錯誤
          swan.request({
          url: "https://url", // 自行定義報告服務器
          method: "POST",
          errMsg: err
          })
      }
  })  

用戶操作路徑收集

一些較隱蔽的錯誤如果只有錯誤棧信息，排查起來會比較難，如果有用戶操作的路徑，在排查時就方便多了。

暴力打點方法收集
優點：簡單直接
缺點：污染業務代碼，造成較多垃圾代碼

函數劫持
需要在App函數中的onLaunch、onShow、onHide生命周期插入監控代碼，通過重寫App生命周期函數來實現。

  App = function(app) {
      ["onLaunch", "onShow", "onHide"].forEach(methodName => {
          app[methodName] = function(options) {
          // 構造訪問日志對象
          var breadcrumb = {
              type: "function",
              time: utils.now(),
              belong: "App", // 來源
              method: methodName,
              path: options && options.path, // 頁面路徑
              query: options && options.query, // 頁面參數
              scene: options && options.scene // 場景編號
          };
          self.pushToBreadcrumb(breadcrumb); // 把執行對象加入到面包屑中
      })
  }

但是這樣寫，會把用戶自定義的內容給覆蓋掉，所以還需要把用戶定義的函數和監控代碼合并。

    var originApp = App // 保存原對象
    App = function(app) {
        // .... 此處省略監控代碼
        // .... 此處省略監控代碼
        originApp(app) // 執行用戶定義的方法
    }  

小程序性能監控插件

Fundebug 提供網站、微信小程序和小游戲的bug監控服務,例如：API的一些函數調用情況、監控函數調用的參數、收集HTTP請求錯誤的body、監控某些特定的自定義函數等。
FrontJS 的小程序錯誤監控相比于微信小程序后臺的數據監控，增加了對于錯誤的統計和產生錯誤的相關用戶分析，FrontJS可以收集精細到 console.log 級別的任何 JavaScript 異常信息并提供 stack trace 信息；對于任何一條錯誤信息或訪問，它都會統計到該用戶IP、屏幕分辨率、DPR、操作系統類型和微信版本，方便更有針對性的去調試出現的錯誤。
百度數據統計分析展示平臺 提供對web頁面的性能、訪問點擊、js異常、瀏覽器新特性、跨站資源、XSS漏洞、自定義事件、Native性能檢測服務，對 百度小程序 的支持還需進一步調研。

白屏監控

用戶在訪問網頁的時候，在瀏覽器開始顯示之前都會有一個的白屏過程，在移動端，受限于設備性能和網絡速度，白屏會更加明顯。

白屏時間

頁面完全空白的時間，web可以在頁面的head底部添加的JS代碼用來做白屏時間的標記。

微信 web 資源離線存儲

通過使用微信離線存儲，Web 開發者可借助微信提供的資源存儲能力，直接從微信本地加載 Web 資源而不需要再從服務端拉取，從而減少網頁加載時間，為微信用戶提供更優質的網頁瀏覽體驗。每個公眾號下所有 Web App 累計最多可緩存 5M 的資源。這個設計有點類似 HTML5 的 Application Cache。

參考資料
小程序基礎庫的更新迭代——8.2 異常
小程序異常監控收集
微信小程序錯誤監控經驗談
JS實現監控微信小程序的原理
微信小程序函數調用監控
微信 Web 資源離線存儲

總結

以上是生活随笔為你收集整理的小程序异常监控及错误处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。