微信小程序 | 接入阿里云监控

喜大奔普，微信小程序可接入 ARMS 前端监控啦。

阿里云监控可统计JS错误率，访问速度，API请求成功率，PU/PV，页面访问量，API链路追踪，地理分布，设备型号系统版本等等，还可自定义统计内容，很是方便。

虽然官方文档写得很清楚，但不同框架和不同环境下的选择不同，本文供大家参考，少走弯路，快速接入。

参考官方文档：https://help.aliyun.com/document_detail/103992.html?spm=a2c4g.11186623.6.605.195a33b7ROXRgP

1、获取SDK内容

将SDK内容copy放在微信小程序/utils目录下的wxLogger.js（名字可随意）文件中

SDK地址：https://retcode.alicdn.com/retcode/wl.js

• 如果项目使用ES module (import)方式集成，则需要将sdk最后一行引入方式修改：

修改前：
var clazz=WXLogger;module.exports=clazz;
修改后：
export default WXLogger;

2、初始化

添加pid、uid：
pid是你的站点ID，在阿里云控制台--业务实时监控服务--前端监控添加你的监控后，即可在设置--应用设置中看到；
uid就是你的用户ID，用于统计 UV。

• 如果项目使用node module (require)方式集成，则添加以下内容：

const WXLogger = require('./wxLogger.js');
const Monitor = WXLogger.init({
    pid: '你的pid',
    uid: "userId",
    region: 'cn'
});
export default Monitor;

• 如果项目使用ES module (import)方式集成，则添加以下内容：

import WXLogger from './wxLogger.js';
const Monitor = WXLogger.init({
    pid: '你的pid',
    uid: "userId",
    region: 'cn'
});
export default Monitor;

3、日志上报

• 静默上报
  如果项目采用原生开发，直接使用静默采集 PV、Error、API、性能及 Health 数据是最方便的。

需要注意的是：小程序监控项目如需使用 hookApp、hookPage 嵌入生命周期打点，必须符合标准小程序关于 App 和 Page 的规范，即 App层有 onError，Page 层有 onShow、onHide、onUnload

1. 在app.js中使用Monitor.hookApp(options)方法静默捕获Error类日志。其中的options即为App层相应的Object配置。使用方式如下：

import Monitor from 'utils/monitor';

App(Monitor.hookApp({
  onShow(options) {
      //...
  }
}));

2. 在page的JS文件中通过Monitor.hookPage(options)方法静默上报PV、Health数据。使用方式如下：

import Monitor from 'utils/monitor';

Page(Monitor.hookPage({
    onLoad(query) {
        //...
    }
}));

• 手动上报
  如果项目采用框架开发如mpvue，无法直接使用静默上报时，可采用进阶方法-手动上报打点，此时需要注意请勿与静默上报方法同时使用，否则会造成日志重复上报。

import Monitor from 'utils/monitor'

export default {
  data() {
    return {}
  },
  created() {},
  mounted() {},
  onShow() {
    Monitor.pageShow()
  },
  onHide() {
    Monitor.pageHide()
  },
  onError() {
    Monitor.pageError()
  }
}

在开发中，我们经常会用微信开发者工具进行调试，此时也会把测试环境的数据往上报，造成数据污染，那么就需要对环境进行区分判断，当只有线上环境时，才上报数据。而手动上报的方式可以方便的添加环境判断，达到我们的目的。下面是对Monitor简单的改写：

import WXLogger from 'utils/wxLogger.js'

/**
 * 用于判断是否是线上环境
 */
const isOnline = (() => {
  if (‘你的环境判断方法’) {
    return true
  } else {
    return false
  }
})()

/**
 * disableHook 是否禁用 request 请求监听。默认会监听并用于上报 API 调用成功率。
 * uid 用户 ID，用于统计 UV。
 */
const Monitor = WXLogger.init({
  pid: "你的pid",
  uid: "userId",
  region: 'cn',
  disableHook: !isOnline
})

const pageShow = () => {
  if (isOnline) {
    Monitor.pageShow()
  }
}

const pageHide = () => {
  if (isOnline) {
    Monitor.pageHide()
  }
}

const pageError = () => {
  if (isOnline) {
    Monitor.error()
  }
}

export default {
  pageShow,
  pageHide,
  pageError
}

4、设置安全域名

最后设置安全域名，就OK啦。

• 如果region设为cn，则将https://arms-retcode.aliyuncs.com添加到request合法域名。
• 如果region设为sg，则将https://arms-retcode-sg.aliyuncs.com添加到request合法域名。