如何接入小程序监控 SDK

1. 支持情况

• [√] 支付宝小程序
• [√] 微信小程序
• [√] 钉钉小程序
• [√] 百度智能小程序
• [√] 头条小程序

2. 引用方式

2.1 npm 包（推荐）

// 1. 安装依赖
npm i sls-mini-app-reporter --save

// 2. 引入依赖，目前支持 支付宝小程序(alipay)、微信小程序(wechat)、钉钉小程序(dd)、百度小程序(baidu)、头条小程序(tt)
import AliPayReporter from 'sls-mini-app-reporter/alipay'
import WechatReporter from 'sls-mini-app-reporter/wechat'
import DDReporter from 'sls-mini-app-reporter/dingtalk'
import BaiduReporter from 'sls-mini-app-reporter/baidu'
import TTReporter from 'sls-mini-app-reporter/tt'

2.2 源码依赖

目前大部分小程序都已经支持 npm 了，所以首推 npm 依赖的方式来使用 SDK 当然，有些平台对 npm 的支持略显特殊，如果发现安装依赖后无法编译，那么可以尝试用源码依赖的方式来解决

// 如何获取代码 // 1. 从 node_modules/sls-mini-app-reporter 目录下拷贝代码到小程序的项目目录下

举栗：微信小程序项目 wechatDemo 源码依赖 SDK

1. 获取目录 sls-mini-app-reporter
2. 拷贝文件至项目目录中，比如 wechatDemo/utils

|- wechatDemo
|----utils
|------app
|------sls-mini-app-reporter

注：SDK 的构建产物支持直接用 ES6 语法来 import，也可以 require

3 如何接入 SLS 移动运维监控

3.1 创建应用

登录  https://sls.console.aliyun.com/lognext/app/mobilAPM  输入应用名称、及应用描述，选择 project，应用类型之后点击创建应用即可

注：创建应用后，点击修改可获取应用 bid（SDK 初始化需要）

3.2 初始化

一般情况下，我们初始化一次 SDK 即可，可以把 SDK 实例导出供全局复用

1. 确保已按照「步骤 2：引用方式」正确安装依赖（这里以 npm 依赖为例）
2. 在 utils 目录下，新增 miniapp-reporter.js 文件，文件加入以下内容

// miniapp-reporter.js
import MiniAppReporter from "sls-mini-app-reporter/alipay"; // 支付宝小程序
const reporter = new MiniAppReporter({
  bid: "", // 应用标识，从「步骤3.1：创建应用」获取 (必填)
  project: "", // 项目project，从「步骤3.1：创建应用」获取 (必填)
  endpoint: "", // project对应的endpoint（必填）
  logstore: "", // logstore（移动运维监控接入可不填，默认会上传到sls-alysls-track-base）
  uid: "", // 用户标识，非必须，默认是 uuid，建议设置；支持函数 （微信小程序无需设置）
  rel: "", // 小程序版本，非必须，默认为空，建议设置；支持函数
  debug: false, // 非必填，设为true时，可输出较为详细的日志信息
  checkHidden: false, // 不可见（onHide）不上报，默认true，不需要此逻辑设为false关闭，插件建议设为false
  slsParams: {
    // 扩展参数，会一并写入logstore（非必填）
    app_name: "", // 小程序中文名称
    user_nick: "", // 登录nick
    logon_type: "", // 登录类型
  },
});
// 导出单例
export default reporter;

注：微信小程序，只需要将导入的包换为 wechat 即可：'sls-mini-app-reporter/wechat'

3.3 全局监听

全局监听主要是针对 app.js，这一步可以实现对 全局异常 以及 API 请求 的监控

// 根目录下的 app.js
import reporter from "/utils/miniapp-reporter";

App(
  reporter.wrapApp({
    onLaunch() {},
    onShow() {},
    onHide() {},
    onError(error) {},
  })
);
// reporter.wrapApp 的参数与原App的参数保持一致
// 因此，这一步变动，仅仅只把原来App的入参用 reporter.wrapApp() 来包裹一层，使用成本较低

3.4 页面监听

目前主要是监听页面 PV

// 某页面的入口js
import reporter from "/utils/miniapp-reporter";

const app = getApp();

Page(
  reporter.wrapPage({
    data: {},
    onLoad() {},
    onShow() {},
    onHide() {},
    onUnload() {},
    onReady() {},
    onTodoChanged(e) {},
    addTodo() {},
  })
);
// 显然，这里的调用方式跟 app.js是一样的

4 进阶

4.1 手动上报

除了常规的 PV/UV、JSError、API 请求监控之外，我们还提供了强大的自定义上报功能，用户可以轻易做到对各种场景的监控分析

// 前置条件，引入 itrace实例
// 任意页面的 JS
import reporter from "/utils/miniapp-reporter";

4.1.1 通用的手动上报接口 report

// logData为一个Object类型的参数
reporter.report(logData);

logData 格式：

{
  key: 'value',
  key2: 'value'
}

4.1.2 SDK 内置的 API

• 手动上报 JS 异常 reportJSError reporter.reportJSError(error, logData) // 等价于 reporter.reportError 参数说明

error 必须是一个标准的 JS Error 对象：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error *logData *参数格式参考 4.1.1 章节的 logData 通用字段（category 不需要传！category 不需要传！）

• 手动上报 api 数据 reporter.reportApi(logData) // 等价于 reporter.reportApiError

logData 字段如下：

{
  url: '',         // 建议是完整请求地址，包括协议, https://your.gateway.domain/api/user
  method: '',      // HTTP请求方法，GET、POST、PUT、DELETE等
  queryString: '', // 支持字符串或者 Object格式：p1=v1&p2=v2 or { p1: v1, p2: v2 }
  headers: {},     // 请求头，Object格式
  body: '',        // 请求内容
  response: '',    // 响应内容
  respHeaders: {}, // 响应头
  status: 200,     // HTTP响应码
  spent: 100       // 请求RT：整数，默认单位毫秒
}

4.2 其他

能阅读到此处的用户，说明默认的 SDK 配置已经无法满足你了。实际上，这一小节的内容正是介绍 SDK 的各种灵活配置的。

4.2.1 采样率设置 日志量较大的情况下，建议配置一定采样率，避免日志全量上报

// 1. 全局，默认采样率是 1(100%)
const reporter = new MiniAppReporter({
  //  ...
  sampleRate: 0.5, // 或者 50%，所有日志类型都会应用此采样率
  //  ...
});

// 2.单独对 JSError进行采样
const reporter = new MiniAppReporter({
  //  ...
  jsErrorSampleRate: 0.5, // 或者 50%，JS异常日志都会应用此采样率
  //  ...
});

// 3.单独对 api进行采样
const reporter = new MiniAppReporter({
  //  ...
  apiSampleRate: 0.5, // 或者 50%，api请求日志都会应用此采样率
  //  ...
});
// 4.单独对 性能 进行采样
const reporter = new MiniAppReporter({
  //  ...
  launchPerfSampleRate: 0.5, // 或者 50%，启动性能日志都会应用此采样率
  pagePerfSampleRate: 0.5, // 或者 50%，页面性能日志都会应用此采样率
  //  ...
});

4.2.2 全局日志过滤 所有日志上报时都会应用此过滤器

const reporter = new MiniAppReporter({
  //  ...
  beforeSend: function (logData) {
    // logData格式参考 4.1.1章节
    // 有需要的用户，在这里可以对 logData进行加工
    // 如果要阻止本条日志上报，可以
    // return false
  },
  //  ...
});

4.2.3 JSError 过滤 可能在部分场景下，我们并不关注某些类型的 JS 异常，此时就可以使用该过滤器

const reporter = new MiniAppReporter({
  //  ...
  jsErrorFilter: function (error) {
    // error为一个标准的 JS Error对象
    // 如果要阻止本条日志上报，可以
    // return false
  },
  //  ...
});

4.2.4 API 相关 SDK 默认会开启 API 监控的功能，同时由于安全方面的考虑，SDK 默认并不会上报请求体、请求头、响应体以及响应头，但这些默认行为，你都有机会来自定义

const reporter = new MiniAppReporter({
  //  ...
  disableApi: true, // 关闭 api监控
  apiBody: false, // 上报请求体，默认 false，不上报
  apiResponse: false, // 上报响应体，默认 false，不上报
  apiRequestHeader: false, // 上报请求头，默认 false，不上报
  apiResponseHeader: false, // 上报响应头，默认 false，不上报
  apiFilter: function (logData) {
    // ...
    // logData的格式参考 「手动上报 api数据」小节
    // return false 可阻止本条日志上报
    // ...
  },
  //  ...
});

4.2.5 性能相关 配置

const reporter = new MiniAppReporter({
//  ...
  launchPerfSampleRate: 0.5, // 或者 50%，启动性能日志都会应用此采样率
  pagePerfSampleRate: 0.5, // 或者 50%，页面性能日志都会应用此采样率
  disableLaunchPerf: true,// 关闭 启动性能 监控
  disablePagePerf: true,// 关闭 页面性能 监控
  //性能日志默认将在 onReady 钩子回调 5000ms后或onHide/onUnload钩子回调时上报
  perfUploadAfter: 5000,
  launchPerfFilter: function (logData) {
    // ...
    // return false 可阻止本条日志上报
  // ...
    }
  pagePerfFilter: function (logData) {
        // return false 可阻止本条日志上报
    }
//  ...
})

性能标记

reporter.perfMark(name, type);

type： start: 表示标记指标的起始时间点 end: 表示标记指标的结束时间点 name: bizAvailable： 业务可用 wl_avgv1 - wl_avgv5: 自定义指标 demo

setData({...}, function () {
  reporter.perfMark('bizAvailable', 'end')// 设置业务可用结束时间点
})
reporter.perfMark('wl_avgv1', 'start')// 设置性能指标1的时间起点 // 指标1相关代码执行开始 ... // 指标1相关代码执行结束 reporter.perfMark('wl_avgv1', 'end')