性能文章>从零开始搞监控系统(5)——小程序监控>

从零开始搞监控系统(5)——小程序监控原创

1年前
109413

  公司目前在线上运行着一款小程序,为了能监控小程序的运行情况,自行开发了一个参数搜集的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()getNetworkType()读取当前网络类型;getSystemInfo()读取当前设备信息。

  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事件时记录网络类型和设备信息,在触发 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)在开发管理中的错误日志(参考教程)中,可下载线上版本的 SourceMap 文件或者,或者在上传完代码后,会提示你下载该文件。

  

  4)最后可在控制台调试器中出现 sourcemap 标签,在此处加载映射文件以及输入行号和列号,完成映射。

  

参考:

详解:如何监控小程序异常及处理错误?

小程序异常监控收集

小程序错误异常监控方案

sourceMap匹配调试

点赞收藏
分类:标签:
咖啡机KFJ

https://www.cnblogs.com/strick

请先登录,查看1条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步
3
1