&emsp;&emsp;公司目前在線上運行著一款小程序，為了能監控小程序的運行情況，自行開發了一個參數搜集的SDK，名稱為 shin.js，放置在 utils 目錄中。 &emsp;&emsp;目前只搜集了打印、通信和錯誤，其中打印不是 console.log() 而是 shin.log()。 &emsp;&emsp;在小程序的管理后臺，開發管理中，目前也有一個錯誤日志列表，其中也有比較詳盡的錯誤信息，可配合監控系統使用。 :-:  ## 一、SDK **1）log** &emsp;&emsp;在 Shin 類的構造函數中，聲明了 log() 方法，主要就是將傳入的數據解析成JSON格式的字符串，然后傳遞給后臺。 &emsp;&emsp;options 是可配置的參數，包括參數的發送地址，以及項目 token。injectApp() 方法修改了原生的 App 方法并且注入了監控邏輯，具體會在后面講解。 ~~~ class Shin { constructor(options) { this.options = options; this.injectApp(); // 將打印的日志推送到監控后臺 ['log'].forEach((type) => { this[type] = msg => { this.send({ category: 'console', data: { type, desc: JSON.stringify(msg) } }) }; }); } } ~~~ &emsp;&emsp;為了與之前的數據結構兼容，需要整理成指定的格式后，再發送。 **2）發送** &emsp;&emsp;send() 方法用于發送，其中 identity 是一個身份標識，存在于全局對象 globalData 中，而它是通過 getIdentity() 方法生成的。 ~~~ getIdentity() { return Number(Math.random().toString().substr(3, 3) + Date.now()).toString(36); } send(params) { //日志通用數據配置 params.identity = getApp().globalData.identity; params.token = this.options.token; params.data = Object.assign(params.data, { network: this.network, url: this.getActivePage().route }); //錯誤日志還需要記錄設備信息 if(params.category == 'error') { params.data.system = this.system; } wx.request({ url: this.options.src, method: "GET", data: { m: JSON.stringify(params) } }); } ~~~ &emsp;&emsp;代碼中的?getActivePage()?用于讀取當前頁面，調用了[getCurrentPages()](https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html)；[getNetworkType()](https://developers.weixin.qq.com/miniprogram/dev/api/device/network/wx.getNetworkType.html)讀取當前網絡類型；[getSystemInfo()](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html)讀取當前設備信息。 ~~~ getActivePage() { // 獲取當前頁面棧 const curPages = getCurrentPages(); if (curPages.length) { return curPages[curPages.length - 1]; } return {}; } getNetworkType() { wx.getNetworkType({ success: (res) => { this.network = res.networkType; }, }); } getSystemInfo() { wx.getSystemInfo({ success: (res) => { this.system = res; }, }); } ~~~ **3）錯誤** &emsp;&emsp;在構造函數中調用了 injectApp() 方法，為 App 注入自定義的監控行為。 &emsp;&emsp;在觸發[onLaunch](https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html)事件時記錄網絡類型和設備信息，在觸發 onError 事件時將具體的錯誤信息發送到后臺。 ~~~ injectApp() { const originApp = App; const self = this; App = function (app) { ['onLaunch', 'onError'].forEach((methodName) => { const customMethod = app[methodName]; //暫存自定義的方法 if (methodName === 'onLaunch') { self.getNetworkType(); //記錄網絡 self.getSystemInfo(); //記錄設備信息 } app[methodName] = function (options) { if(methodName === 'onError') { const params = { category: 'error', data: { type: 'mini', desc: options, //錯誤信息 } }; self.send(params); //錯誤上報 } return customMethod && customMethod.call(this, options); }; }); return originApp(app); }; } ~~~ **4）通信** &emsp;&emsp;我們自己封裝了一個通信庫，為了操作簡便，就定義了一個方法，在通信完成時調用此方法。 ~~~ formatRequest({ res, url, method, data }) { // 響應 const ajax = { type: method, status: res.statusCode, url, data } // 過濾掉數據量大的響應 if(JSON.stringify(res.data).length <= 300) { ajax.response = res.data; } const params = {}; if(res.statusCode >= 400) { params.category = 'error'; params.data = { type: 'promise', desc: ajax }; }else { params.category = 'ajax' params.data = ajax; } this.send(params); } ~~~ &emsp;&emsp;它接收的參數包括 res（響應數據），url（請求地址），method（請求方法），data（請求參數）。 &emsp;&emsp;其中 res 包括狀態碼和響應內容，狀態碼囊括了4XX和5XX。 **5）初始化** &emsp;&emsp;在啟動文件 app.js 引入 shin.js文件，并初始化，在 globalData 中添加 shin 和 identity。 ~~~ import Shin from './utils/shin'; const shin = new Shin({ src: 'https://127.0.0.1:3000/ma.gif', token: 'mini' }); globalData: { shin, identity: shin.getIdentity(), } ~~~ **6）監控后臺** &emsp;&emsp;參數搜集的 api 不需要做任何修改，在監控后臺的頁面中也只是加幾個過濾選項即可，而這些選項都已經寫成了常量，修改起來很方便，例如： ~~~ export const MONITOR_PROJECT = [ { key: 'backend', value: '管理后臺' }, { key: 'h5', value: 'H5活動' }, { key: 'mini', value: '小程序'} ]; ~~~ ## 二、Source Map &emsp;&emsp;目前還不能在監控后臺直接通過 SourceMap 自動映射（未來的一個優化點）。 &emsp;&emsp;需要先從小程序后臺下載 SourceMap 文件，下載完后導入小程序開發編輯器中查看映射條件。 &emsp;&emsp;具體過程： &emsp;&emsp;1）首先小程序開發器的版本必須得是 1.03.2012152 以上。 &emsp;&emsp;2）選擇"設置-通用設置-擴展-調試器插件"，進入插件下載頁面，添加sourcemap匹配調試插件。 :-:  &emsp;&emsp;3）在開發管理中的錯誤日志（參考[教程](https://developers.weixin.qq.com/miniprogram/dev/devtools/sourcemap.html)）中，可下載線上版本的 SourceMap 文件或者，或者在上傳完代碼后，會提示你下載該文件。  &emsp;&emsp;4）最后可在控制臺調試器中出現 sourcemap 標簽，在此處加載映射文件以及輸入行號和列號，完成映射。 :-:  ***** > 原文出處： [博客園-從零開始搞系列](https://www.cnblogs.com/strick/category/1928903.html) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。