5、小程序
最后更新于：2022-04-02 06:10:50
公司目前在线上运行着一款小程序，为了能监控小程序的运行情况，自行开发了一个参数搜集的SDK，名称为 shin.js，放置在 utils 目录中。
目前只搜集了打印、通信和错误，其中打印不是 console.log() 而是 shin.log()。
在小程序的管理后台，开发管理中，目前也有一个错误日志列表，其中也有比较详尽的错误信息，可配合监控系统使用。
:-: 
## 一、SDK
**1）log**
在 Shin 类的构造函数中，声明了 log() 方法，主要就是将传入的数据解析成JSON格式的字符串，然后传递给后台。
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)
}
})
};
});
}
}
~~~
为了与之前的数据结构兼容，需要整理成指定的格式后，再发送。
**2）发送**
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)
}
});
}
~~~
代码中的 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）错误**
在构造函数中调用了 injectApp() 方法，为 App 注入自定义的监控行为。
在触发[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）通信**
我们自己封装了一个通信库，为了操作简便，就定义了一个方法，在通信完成时调用此方法。
~~~
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);
}
~~~
它接收的参数包括 res（响应数据），url（请求地址），method（请求方法），data（请求参数）。
其中 res 包括状态码和响应内容，状态码囊括了4XX和5XX。
**5）初始化**
在启动文件 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）监控后台**
参数搜集的 api 不需要做任何修改，在监控后台的页面中也只是加几个过滤选项即可，而这些选项都已经写成了常量，修改起来很方便，例如：
~~~
export const MONITOR_PROJECT = [
{ key: 'backend', value: '管理后台' },
{ key: 'h5', value: 'H5活动' },
{ key: 'mini', value: '小程序'}
];
~~~
## 二、Source Map
目前还不能在监控后台直接通过 SourceMap 自动映射（未来的一个优化点）。
需要先从小程序后台下载 SourceMap 文件，下载完后导入小程序开发编辑器中查看映射条件。
具体过程：
1）首先小程序开发器的版本必须得是 1.03.2012152 以上。
2）选择"设置-通用设置-扩展-调试器插件"，进入插件下载页面，添加sourcemap匹配调试插件。
:-: 
3）在开发管理中的错误日志（参考[教程](https://developers.weixin.qq.com/miniprogram/dev/devtools/sourcemap.html)）中，可下载线上版本的 SourceMap 文件或者，或者在上传完代码后，会提示你下载该文件。
4）最后可在控制台调试器中出现 sourcemap 标签，在此处加载映射文件以及输入行号和列号，完成映射。
:-: 
*****
> 原文出处：
[博客园-从零开始搞系列](https://www.cnblogs.com/strick/category/1928903.html)
已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。
';