日志服务支持通过SDK接入支付宝小程序、微信小程序、钉钉小程序、百度智能小程序和头条小程序的监控数据。移动运维监控用于实时监控小程序问题,并且支持智能分析,帮助您低成本、高效率地发现小程序中的各类隐患。

前提条件

已创建移动监控应用。具体操作,请参见添加应用

步骤一:安装SDK

目前大部分小程序都支持通过npm方式安装SDK,推荐您使用npm方式。当您安装的npm依赖包无法编译时,您可以使用源码依赖方式来安装SDK。
说明 SDK的构建产物支持直接使用ES6语法import或require。
  • (推荐)npm方式
    1. 安装依赖包。
      npm i sls-mini-app-reporter --save
    2. 导入业务核心SDK包。
      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'
  • 源码依赖方式
    此处以微信小程序为例。
    1. 获取文件sls-mini-app-reporter/wechat.jssls-mini-app-reporter/app/wechat.js
    2. 拷贝文件至项目目录中,例如wechatDemo/utils
      |- wechatDemo
      |----utils
      |------app
      |--------wechat.js
      |------wechat.js

步骤二:初始化SDK

  1. utils目录下,新增miniapp-reporter.js文件。
  2. miniapp-reporter.js文件中,添加如下内容。
    // miniapp-reporter.js
    import MiniAppReporter from 'sls-mini-app-reporter/alipay'
    const reporter = new MiniAppReporter({
      bid: 'sls-f51****fa4573', 
      project: 'my-project', 
      endpoint: 'cn-hangzhou.log.aliyuncs.com', 
      uid: '123456', 
      rel: '1.0',  
      debug: false,
      checkHidden: false, 
      slsParams: { 
        app_name: '', 
        user_nick: '', 
        logon_type: '', 
      }
    })
    // 导出单例 
    export default reporter
    参数名称 是否必填 说明
    bid 您在日志服务移动运维监控平台上所添加的应用的ID。更多信息,请参见添加应用
    project 您添加应用时所选择的日志服务Project。
    endpoint 日志服务Project所属的Endpoint。如何获取,请参见服务入口
    uid 浏览当前页面的用户的唯一标识,默认使用uuid。推荐配置。

    支持字符串和函数两种方式。使用函数设置时,最终需要返回的也是字符串。

    rel 小程序版本号。推荐配置

    支持字符串和函数两种方式。使用函数设置时,最终需要返回的也是字符串。

    debug 是否开启debug模式。
    • (默认值)false:关闭。
    • true:开启。开启后,可以输出更详细的打点过程日志。一般用于接入时的联调分析。
      说明 生产环境中,建议关闭。
    checkHidden 是否上报onHide阶段的数据。
    • (默认值)false:上报。
    • true:不上报。
    slsParams 上报扩展数据。参数值为Object类型。具体格式,请参见logdata说明

步骤三:上报数据

常用的SDK Demo示例如下:

  • 全局监听
    // 根目录下的app.js。
    import reporter from '/utils/miniapp-reporter';
    
    App(
      reporter.wrapApp({   
        onLaunch () {},
        onShow () {},
        onHide () {},
        onError (error) {}
      })
    );
    // reporter.wrapApp的参数与原App的参数保持一致。
    // 本步骤使用reporter.wrapApp()来包裹原来App的入参,降低使用成本。
  • 页面监听
    // 页面的入口JS。
    import reporter from '/utils/miniapp-reporter';
    
    const app = getApp();
    
    Page(
      reporter.wrapPage({
        data: {},
        onLoad() {},
        onShow() {},
        onHide () {},
        onUnload () {},
        onReady () {} , 
        onTodoChanged(e) {},
        addTodo() {}
      })
    );

进阶场景

除了监控常规的PV、UV、JS异常、API请求等指标外,您还可以自定义上报功能,轻松实现各种场景的监控分析。

注意 使用进阶功能时,需要先导入itrace实例。
import reporter from '/utils/miniapp-reporter';
  • 手动上报
    • 通用的手动上报接口report
      reporter.report(logdata)   //logdata表示扩展数据。上报数据时,会将该部分数据一起上报。格式说明,请参见logdata说明
    • SDK内置的API
      API 说明
      reportJSError reporter.reportJSError(errorerror, logdata) 手动上报JS异常数据。
      • error必须是一个标准的JS JSON对象。JSON对象格式说明,请参见JavaScript参考
      • logdata表示扩展数据,示例如下:
        {
          url: 'https://your.gateway.domain/api/user',         // 完整请求地址,包括协议。 
          method: 'GET',      // HTTP请求方法。
          queryString: '', // 支持字符串或者Object格式:p1=v1&p2=v2 or { p1: v1, p2: v2 }
          headers: {},     // 请求头,Object格式。
          body: '',        // 请求内容。
          response: '',    // 响应内容。
          respHeaders: {}, // 响应头。
          status: 200,     // HTTP响应码。
          spent: 100       // 请求RT,整数。单位:毫秒。
        }
      reporter.reportApi(logdata) 手动上报API请求数据。
  • 其他
    • 设置采样率:当日志量较大时,建议设置采样率,避免日志全量上报。
      //全量数据,默认采样率是100%。
      const reporter = new MiniAppReporter({
      //  ...
        sampleRate: 0.5 // 所有数据都会应用此采样率。
      //  ...
      })
      
      //单独对JS异常数据进行采样。
      const reporter = new MiniAppReporter({
      //  ...
        jsErrorSampleRate: 0.5 //JS异常数据应用此采样率。
      //  ...
      })
      
      //单独对API请求数据进行采样。
      const reporter = new MiniAppReporter({
      //  ...
        apiSampleRate: 0.5 // API请求数据应用此采样率。
      //  ...
      })
      //单独对性能数据进行采样。
      const reporter = new MiniAppReporter({
      //  ...
        launchPerfSampleRate: 0.5, //启动性能数据应用此采样率。
        pagePerfSampleRate: 0.5 //页面性能数据应用此采样率。
      //  ...
      })
    • 设置面向全量数据的过滤器。
      const reporter = new MiniAppReporter({
      //  ...
        beforeSend: function (logdata) {
          // 您还可以添加自定义字段,对日志数据进行加工。
      
          // 添加return false,可阻止本条数据上报。
        }
      //  ...
      })
    • 设置面向JS异常数据的过滤器。
      const reporter = new MiniAppReporter({
      //  ...
        jsErrorFilter: function (error) {
          // error为标准的JS Error对象。
      
          // 添加return false,可阻止本条数据上报。
        }
      //  ...
      })
    • 设置API请求数据相关的配置:API请求相关的SDK默认开启API请求监控功能,同时由于安全方面的考虑,SDK默认不会上报请求体、请求头、响应体以及响应头等信息。您可以修改配置,实现请求体、请求头、响应体以及响应头等数据上报。
      const reporter = new MiniAppReporter({
      //  ...
        disableApi: true,         // 是否关闭API监控功能。默认为false,表示不关闭。
        apiBody: false,           // 是否上报请求体。默认为false,表示不上报。
        apiResponse: false,       // 是否上报响应体。默认为false,表示不上报。
        apiRequestHeader: false,  // 是否上报请求头。默认为false,表示不上报。
        apiResponseHeader: false, // 是否上报响应头。默认为false,表示不上报。
        apiFilter: function (logdata) {
          // ...
          //添加return false,可阻止本条数据上报。
        // ...
          }
      //  ...
      })
    • 设置性能数据相关的配置。
      • 配置
        const reporter = new MiniAppReporter({
        //  ...
          launchPerfSampleRate: 0.5, //启动性能数据应用此采样率。
          pagePerfSampleRate: 0.5, // 页面性能日志应用此采样率。
          disableLaunchPerf: true,// 是否关闭启动性能监控。
          disablePagePerf: true,// 是否关闭页面性能监控。
          //默认将在onReady钩子回调5000 ms后或onHide、onUnload钩子回调时上报性能日志。
          perfUploadAfter: 5000,
          launchPerfFilter: function (logdata) {
            // ...
            // 添加return false,可阻止本条数据上报。
          // ...
            }
          pagePerfFilter: function (logdata) {
                // 添加return false,可阻止本条数据上报。
            }
        //  ...
        })
      • 性能标记
        reporter.perfMark(name, type)
        setData({...}, function () {
           itrace.perfMark('bizAvailable', 'end')// 设置业务可用结束时间点。
        })
        
        itrace.perfMark('wl_avgv1', 'start')// 设置性能指标1的时间起点。
        // 指标1相关代码开启执行。
        ...
        // 指标1相关代码执行结束。
        itrace.perfMark('wl_avgv1', 'end') 
        参数 说明
        name 自定义指标的名称。例如:
        • bizAvailable: 业务可用。
        • wl_avgv1 - wl_avgv5:自定义指标。
        type 时间点。包括:
        • start:标记指标的起始时间点。
        • end:标记指标的结束时间点。

logdata说明

logdata为扩展数据。SDK在上报数据时,会将您自定义的扩展数据一起上报。

{
   key1: 'v1',
   key2: 'v2'
}