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

本文介绍如何通过日志服务SDK接入小程序的Web用户体验数据。

前提条件

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

安装和初始化

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

  1. 登录日志服务控制台

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

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

    重要

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

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

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

    1. 单击微信小程序,然后单击下一步image

    2. 配置基础信息。

      参数

      说明

      环境

      设置环境信息后,当您将不同环境(开发、测试、集成)中的小程序用户体验数据接入到同一个实例中时,数据中将被添加环境信息,便于您区分不同环境中的小程序的用户体验数据。

      服务名

      设置服务名后,当您将不同的服务(网站、业务、部门)中的小程序用户体验数据接入到同一个实例中时,数据中将被添加服务信息,便于您区分不同服务中的小程序用户体验数据。

      上报请求数据

      打开上报请求数据开关,表示允许SDK上报API请求数据(fetch、xhr)。

      链路追踪

      打开链路追踪开关,表示允许SDK上报前后端链路追踪数据。

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

  1. 复制上述脚本,进行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 // 开启链路监控。
      })
  2. 接入SDK后,访问您的测试小程序,产生测试数据。

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

  4. 接入数据对话框中,单击下一步

  5. 接入数据配置向导的检查数据步骤中,单击检查数据

  6. 确认数据无误后,单击完成

上报自定义事件

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初始化后动态设置这部分参数。当前支持热更新的参数有uidnicknameenvserviceversioncustom。调用方式如下所示。

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配置项

参数名

类型

是否必填

样例

描述

project

string

'my-project'

您在创建实例时所绑定的Project名称。

host

string

'cn-hangzhou.log.aliyuncs.com'

您在创建实例时所绑定的Project的访问域名。如何获取,请参见公网

logstore

string

'my-logstore-raw'

创建实例后,日志服务会自动生成一个名为{instance}-raw的Logstore。其中{instance}为实例ID。

此处需配置为该Logstore。

workspace

string

'my-workspace'

工作空间名称,即实例ID。

uid

string

'123456'

用户ID。

nickname

string

'Alice'

用户昵称。

env

string

'prod'

自定义环境。

service

string

'miniprogram'

服务名称。

version

string

'1.0.0'

版本号。

custom

Record<string, any>

{ key: 'value' }

自定义参数。

该字段用于存储应用程序中的自定义信息,可以是任何类型的JSON对象。

trackTimeThreshold

number

5

发送数据的时间阈值,单位:秒(s)。默认值:2。

0表示立即发送。

trackCountThreshold

number

20

发送数据的条数阈值。默认值:10。

enableTrace

boolean

true

是否打开链路追踪功能。

enableTraceRequestConfig

(((value: string) => boolean) | string | RegExp)[]

需要开启Trace功能的请求。

该参数为数组类型,包含需要开启Trace功能的请求的类型和URL。

customTraceHeaders

Record<string, string>

Trace Header。该字段用于在发送请求时自定义Trace Header。

enableRequest

boolean

true

是否上报请求数据。

ignoreRequestConfig

(((value: string, status: number) => boolean) | string | RegExp)[]

不需要上报的请求。

该参数为数组类型,包含不需要上报的请求的类型和URL。

enableRequestBodyConfig

IEnableTrackRequestBody

需要记录Body的请求。该字段为一个对象,包含需要记录Body的请求的类型和URL。

enableRuntimeError

boolean

true

是否上报JS错误。

ignoreRuntimeErrorConfig

(((value: string) => boolean) | string | RegExp)[]

运行时需要忽略的错误。

该参数为数组类型,包含需要忽略的错误类型。

enableResourceError

boolean

true

是否上报JS资源错误。

enableResourcePerf

boolean

true

是否上报资源性能数据(js、css、image、audio、video)。

ignoreResourceConfig

(((value: string) => boolean) | string | RegExp)[]

需要忽略的资源请求。

该参数为数组类型,包含需要忽略的资源的类型和URL。

enablePerf

boolean

true

是否上报页面加载性能数据。

enableConsoleLog

enum

'warn'

日志级别,取值为error、warn、log、info、debug、false。

配置为info 则只记录 error、warn、info 级别的日志。

platformSDK

any

wx

小程序平台的SDK。

已经适配的平台可以不填写。适配平台如下:

  • wx:微信小程序、微信小游戏

  • my:支付宝小程序

  • tt:字节跳动小程序

  • dd:钉钉小程序

  • qq:QQ小程序、QQ小游戏

  • swan:百度小程序。

platformRequestName

string

request

小程序平台SDK发送请求的接口名称,例如微信小程序的为request。

默认使用request或httpRequest。

附录二:日志字段详情

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