接入小程序的用户体验数据

前提条件

已创建1.1.0及以上版本的全栈可观测实例。具体操作，请参见创建全栈可观测实例。

安装和初始化

本文以接入微信小程序的数据为例。

1. 登录日志服务控制台。

2. 在日志应用区域的智能运维页签下，单击全栈可观测。

3. 在实例列表中，单击目标实例。

   重要

   该实例需为1.1.0及以上版本。

4. 在左侧导航栏中，选择用户体验监控 > 数据接入。

5. 在接入数据对话框中，完成如下配置。

   1. 单击微信小程序，然后单击下一步。

   2. 配置基础信息。

      参数	说明
      环境	设置环境信息后，当您将不同环境（开发、测试、集成）中的小程序用户体验数据接入到同一个实例中时，数据中将被添加环境信息，便于您区分不同环境中的小程序的用户体验数据。
      服务名	设置服务名后，当您将不同的服务（网站、业务、部门）中的小程序用户体验数据接入到同一个实例中时，数据中将被添加服务信息，便于您区分不同服务中的小程序用户体验数据。
      上报请求数据	打开上报请求数据开关，表示允许SDK上报API请求数据（fetch、xhr）。
      链路追踪	打开链路追踪开关，表示允许SDK上报前后端链路追踪数据。

      完成上述配置后，系统将生成对应的安装和初始化脚本。

7. 复制上述脚本，进行SDK安装和初始化。

   小程序相关的SDK只支持通过NPM进行安装。

   1. 安装NPM包。

      npm install @aliyun-sls/web-trace-mini

   2. 初始化SDK。

      其中，SLS_TRACER还支持添加其他配置项。更多信息，请参见附录一：SLS_TRACER配置项。

      import { SLS_TRACER } from '@aliyun-sls/web-trace-mini';
      
      SLS_TRACER.init({
        host: 'cn-beijing.log.aliyuncs.com',// 您在创建实例时所绑定的Project的访问域名。
        project: 'demo-test',//  您在创建实例时所绑定的Project。
        logstore: 'demo-test-raw', //Logstore名称。创建实例后，日志服务会自动生成一个名为{instance}-raw的Logstore。
        workspace: 'demo-test',// 工作空间名称，即实例ID。
        env:  'prod',// 自定义环境。
        service:  'miniprogram',// 服务名称。
        enableRequest:  true,// 上报API请求数据。
        enableTrace:  true // 开启链路监控。
      })

8. 接入SDK后，访问您的测试小程序，产生测试数据。

9. 返回到日志服务控制台的全栈可观测应用中。

10. 在接入数据对话框中，单击下一步。

11. 在接入数据配置向导的检查数据步骤中，单击检查数据。

12. 确认数据无误后，单击完成。

上报自定义事件

SLS_TRACER SDK支持自动对某些事件进行监控，同时还支持您手动上报日志。

SLS_TRACER.addLog()接口用于上报自定义事件，该接口支持定义一个JSON格式的参数及支持嵌套JSON格式。上报的数据支持使用日志服务查询和分析语句。SLS_TRACER.addLog()接口的调用方式如下：

  SLS_TRACER.addLog({
    key: 'value',
    number: 1,
    array: [],
    json: {
      json: 'json'
    }
  })

支持部分参数热更新

在某些场景中，不一定能立即获取uid等用户参数，SLS_TRACER SDK允许在SDK初始化后动态设置这部分参数。当前支持热更新的参数有uid、nickname、env、service、version、custom。调用方式如下所示。

SLS_TRACER.setOptions({
  uid: 'uid',
  nickname: 'newnickname',
  env: 'newEnv',
  custom: {
    c: 'newCustom',
  },
  version: 'newVersion',
  service: 'newService',
})

自定义插件

SLS_TRACER SDK支持在上报数据过程中修改数据。

// 必须在init之前调用。
SLS_TRACER.use({
  name: 'myPlugin',
  run: function () {
    this.subscribe(
      '*', // 订阅所有的数据源。如果是自定义订阅的事件，必须设置为星号（*）。
      (data, next) => {
        //
        //
        // 可以根据data.otBase.t，确定数据类型。
        //
        //
        
        next(data) // 将新的数据传入下一个处理者时，必须调用，否则该条数据会停止上报。
      },
      0, // 通过优先级(0~99)，控制执行插件的顺序。
    )
  },
})

// data的数据类型。
export interface NotifyData<OT extends Partial<OTTrace>, Extra = Record<string, any> | undefined> {
  otBase: OT
  extra: Extra
}

附录一：SLS_TRACER配置项

附录二：日志字段详情

小程序用户体验数据的字段详情与Web用户体验数据类似。更多信息，请参见附录二：日志字段详情。