小程序異常監控收集

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 資源離線存儲

小程序異常監控及錯誤處理