开发者社区> 咖啡机(K.F.J)> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:   公司目前在线上运行着一款小程序,为了能监控小程序的运行情况,自行开发了一个参数搜集的SDK,名称为 shin.js,放置在 utils 目录中。
+关注继续查看

  公司目前在线上运行着一款小程序,为了能监控小程序的运行情况,自行开发了一个参数搜集的SDK,名称为 shin.js,放置在 utils 目录中。

  目前只搜集了打印、通信和错误,其中打印不是 console.log() 而是 shin.log()。

  在小程序的管理后台,开发管理中,目前也有一个错误日志列表,其中也有比较详尽的错误信息,可配合监控系统使用。


34.png


一、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匹配调试插件。


35.png


  3)在开发管理中的错误日志(参考教程)中,可下载线上版本的 SourceMap 文件或者,或者在上传完代码后,会提示你下载该文件。


36.jpg

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


37.png



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
小程序业务实时监控
本方案主要解决如何基于阿里云服务为小程序快速部署实时监控,介绍了开通和配置相关产品以及查看安全防护效果的具体操作。适用小程序客户,前端可以支持微信小程序、支付宝小程序等。
1296 0
Qt编写安防视频监控系统5-视频回放
一、前言 一般视频回放都会采用GB28181国标来处理,这样可以保证兼容国内各大厂家的NVR,毕竟在同一的国家标准下,大家都会统一支持国标的,就不需要根据各个厂家的SDK来做兼容处理,烦得很,厂家越来越多,SDK也越来越多,每个厂家的接口未必一致,还要重新封装SDK来处理。
1055 0
视频教程 | 1分钟了解支付宝小程序发布流程
一分钟了解支付宝小程序发布流程。
5071 0
C语言及程序设计提高例程-10 调试技术:进入函数内部去
贺老师教学链接  C语言及程序设计提高 本课讲解 老革命遇上新问题(哪错了?) #include &lt;stdio.h&gt; float max(float x, float y); int main () { float a,b,c; scanf("%f %f", &amp;a, &amp;b); c = max(a, b) ; printf("The
873 0
构建富互联网应用程序监控工作流和流程(5)
监控流程活动   以上介绍的前两个步骤(初始化流程并启用工作流)中,流程状态通过 IProcessHandle 和 IInstanceHandle API 接口以可视化方式进行了更新。
680 0
+关注
咖啡机(K.F.J)
每天进步一点点 研磨生活的香甜
350
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载