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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介:   公司目前在线上运行着一款小程序,为了能监控小程序的运行情况,自行开发了一个参数搜集的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



相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
4天前
|
消息中间件 监控 小程序
电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
电竞陪玩系统架构涵盖前端(React/Vue)、后端(Spring Boot/php)、数据库(MySQL/MongoDB)、实时通信(WebSocket)及其他组件(Redis、RabbitMQ、Nginx)。通过模块化设计、微服务架构和云计算技术优化,提升系统性能与可靠性。同时,加强全面测试、实时监控及故障管理,确保系统稳定运行。
|
7月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的新冠病毒校园监控平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的新冠病毒校园监控平台附带文章和源代码部署视频讲解等
62 11
|
监控 小程序
利用PowerShell写的一个CPU监控小程序
业务部门需要,所以写的一个CPU监控小程序,有窗口显示,同时会在当前目录生成日志,有需要的自取,复制代码,TXT另存为xx.ps1即可。 仅供学习交流。
218 0
|
人工智能 监控 前端开发
大型网站重构指南 第1.3部分:前端监控和小程序监控 Sentry
大型网站重构指南 第1.3部分:前端监控和小程序监控 Sentry
1049 0
|
监控 JavaScript
Fundebug微信小程序BUG监控服务支持Source Map
摘要: 自动还原真实出错位置,快速修复BUG。 Source Map功能 微信小程序的Source Map功能目前只在 iOS 6.7.2 及以上版本支持。 微信小程序在打包时,会将所有 js 代码打包成一个文件,从而减少体积,加快访问速度。
1516 0
监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求。其重要性不言而喻。然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request 请求失败",可以搜索到很多相关的文章,下面列出一些: wx.request 失败| 微信开放社区 微信小程序 wx.request 请求失败- SegmentFault 思否 小程序部分机型小程序用户无法发起 wx.request 请求,网络错误问题 ... wx.request()失败,request:fail。
1938 0
监控微信小程序中的慢HTTP请求
请求时间太长,影响用户体验,使用 Fundebug 监控慢请求。
1414 0
Fundebug 微信小程序BUG 监控插件更新至 1.3.1,新增 httpTimeout 配置选项,支持监控 HTTP 慢请求
摘要: 1.3.1新增 httpTimeout 配置选项,支持监控 HTTP 慢请求,同时修复了记录的 HTTP 响应时间偏小的 BUG。 Fundebug是专业微信小程序 BUG 监控服务,可以第一时间捕获线上环境中小程序的异常、错误或者 BUG,及时给开发者推送报警,帮助您快速修复 BUG。
1121 0
|
Web App开发 监控 JavaScript
Fundebug支付宝小程序BUG监控插件更新至0.2.0,新增test()方法,报错增加Page数据
摘要: 0.2.0新增fundebug.test()方法,同时报错增加了Page数据。 Fundebug提供专业支付宝小程序BUG监控服务,可以第一时间为您捕获生存环境中小程序的异常、错误或者BUG,及时给开发者发送报警,帮助您快速修复BUG。
1302 0
|
监控 JavaScript 前端开发
Fundebug上线小程序错误监控啦
作为专业的JavaSript错误实时监测平台,Fundebug的微信小程序实时错误监测服务上线啦,我们能够帮助开发者及时,高效地发现并且解决小程序错误,从而提升用户体验。
1648 0