Simple Log Service:Collect user experience data from mini programs

Prerequisites

A Full-stack Observability instance is created, and the version of the instance is 1.1.0 or later. For more information, see Create an instance.

Installation and initialization

In this topic, the data of WeChat mini programs is collected.

1. Log on to the Simple Log Service console.

2. In the Log Application section, click the Intelligent O&M tab. Then, click Full-stack Observability.

3. In the instance list, click the instance.

   Important

   The version of the instance must be 1.1.0 or later.

4. In the left-side navigation pane, choose User Experience Monitoring > Data Import.

5. In the Import Data dialog box, perform the following operations:

   1. Click WeChat Mini Program. Then, click Next.

   2. Configure basic parameters.

      Parameter	Description
      Environment	After you specify environment information, the environment information is added to the user experience data that is collected from mini programs to an instance. You can specify a development, test, or integration environment. This helps you distinguish between user experience data that is collected from mini programs in different environments.
      Service Name	After you specify the service name, the service information is added to the user experience data that is collected from mini programs to an instance. You can specify websites, workloads, or departments. This helps you to distinguish between user experience data that is collected from mini programs in different services.
      Report Request Data	If you turn on Report Request Data, Simple Log Service SDK uploads API request data such as fetch and xhr.
      Tracing Analysis	If you turn on Tracing Analysis, Simple Log Service SDK uploads the trace data of the frontend and backend.

      After you complete the configurations, Simple Log Service generates the installation and initialization script.

7. Copy the preceding script to install and initialize Simple Log Service SDK.

   You can install Simple Log Service SDK only by using npm.

   1. Install an npm package.

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

   2. Initialize the SDK.

      You can add other configuration items to SLS_TRACER. For more information, see Appendix 1: SLS_TRACER configuration items.

      import { SLS_TRACER } from '@aliyun-sls/web-trace-mini';
      
      SLS_TRACER.init({
        host: 'cn-beijing.log.aliyuncs.com',// The endpoint of the project that you specified when you created the instance. 
        project: 'demo-test',// The project that you specified when you created the instance. 
        logstore: 'demo-test-raw', // The name of the Logstore. After the instance is created, Simple Log Service automatically creates a Logstore named {instance}-raw. 
        workspace: 'demo-test',// The name of the workspace. Enter the instance ID. 
        env:  'prod',// The custom environment. 
        service:  'miniprogram',// The name of the service. 
        enableRequest:  true,// Upload API request data. 
        enableTrace:  true // Enable trace monitoring. 
      })

8. After Simple Log Service SDK is installed and initialized, access your test mini program to generate test data.

9. Return to the Full-stack Observability application in the Simple Log Service console.

10. In the Import Data dialog box, click Next.

11. In the Checking data... step of the Import Data dialog box, click Checking data....

12. After you confirm that the data is valid, click Complete.

Upload custom events

SLS_TRACER SDK supports automatic monitoring of specific events and allows you to upload logs.

The SLS_TRACER.addLog() interface is used to upload custom events. This interface supports nested JSON data and allows you to specify a parameter in the JSON format. You can use a query statement to query and analyze uploaded data in Simple Log Service. The following sample code provides an example on how to call the SLS_TRACER.addLog() interface:

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

Perform the rolling update of parameters

In some scenarios, you may not immediately obtain some user parameters such as uid. SLS_TRACER SDK allows you to dynamically configure the parameters after SLS_TRACER SDK is initialized. The rolling update can be performed on the following parameters: uid, nickname, env, service, version, and custom. The following sample code provides an example on how to call the interface:

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

Configure custom plug-ins

SLS_TRACER SDK allows you to modify data during data uploading.

// You must call the following interface before you initialize the SDK. 
SLS_TRACER.use({
  name: 'myPlugin',
  run: function () {
    this.subscribe(
      '*', // Subscribe to all data sources. If you want to subscribe to custom events, set the value to an asterisk (*). 
      (data, next) => {
        //
        //
        // Determine the data type based on data.otBase.t. 
        //
        //
        
        next(data) // When new data is passed to the next processor, the next(data) method must be called. Otherwise, the system stops uploading the data. 
      },
      0, // Specify the priority of custom plug-ins. The priority range is 0 to 99. 
    )
  },
})

// The data type of the data. 
export interface NotifyData<OT extends Partial<OTTrace>, Extra = Record<string, any> | undefined> {
  otBase: OT
  extra: Extra
}

Appendix 1: SLS_TRACER configuration items

Appendix 2: Details of log fields

The log fields in user experience data of mini programs are similar to the log fields in user experience data of web pages. For more information, see Appendix 2: Details of log fields.