&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 等。