Mini Program Integration Based on Uniapp Development Framework¶

Changelog

2022.9.29: Added isIntakeUrl configuration to initialization parameters, used to determine whether to collect corresponding resource data based on the request resource URL. Default is to collect all.

2022.3.29:

Added traceType configuration to set the link tracing tool type. Defaults to ddtrace if not configured. Currently supports 6 data types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent.
Added allowedTracingOrigins to specify the list of all requests allowed to inject the headers required by the trace collector. Can be request origins or regular expressions.

Prerequisites¶

Install DataKit.

Application Integration¶

Log in to the TrueWatch console, navigate to the RUM page, click Create in the top left corner to start creating a new application.

On the right side, select the installation configuration method, click Parameter Configuration, fill in the relevant configuration parameters, and then copy them for use in your project.

Usage¶

Introduce the code at the beginning of the Uniapp project entry file main.js as follows:

NPM¶

VUE 2VUE 3

Import (refer to the official Uniapp npm import method)

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('@truewatchtech/rum-uniapp')
// Initialize Rum
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>', // Required, Datakit domain address. Must be added to the WeChat Mini Program admin backend domain whitelist.
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform
  env: 'testing', // Optional, mini program environment
  version: '1.0.0', // Optional, mini program version
  service: 'miniapp', // Current application service name
  trackInteractions: true, // User behavior data
  sampleRate: 100, // Percentage of metric data collected, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests allowed to inject headers required by the trace collector. Can be request origins or regular expressions.
})
//#endif
....

Import (refer to the official Uniapp npm import method)

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from '@truewatchtech/rum-uniapp'
// Initialize Rum
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>', // Required, Datakit domain address. Must be added to the WeChat Mini Program admin backend domain whitelist.
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform
  env: 'testing', // Optional, mini program environment
  version: '1.0.0', // Optional, mini program version
  service: 'miniapp', // Current application service name
  trackInteractions: true, // User behavior data
  sampleRate: 100, // Percentage of metric data collected, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests allowed to inject headers required by the trace collector. Can be request origins or regular expressions.
})
//#endif
....

CDN¶

VUE 2VUE 3

Download the file and import it locally (Download Link)

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('./dataflux-rum-miniapp.js'); // Local path to the js file
// Initialize Rum
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>', // Required, Datakit domain address. Must be added to the WeChat Mini Program admin backend domain whitelist.
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform
  env: 'testing', // Optional, mini program environment
  version: '1.0.0', // Optional, mini program version
  service: 'miniapp', // Current application service name
  trackInteractions: true, // User behavior data
  sampleRate: 100, // Percentage of metric data collected, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests allowed to inject headers required by the trace collector. Can be request origins or regular expressions.
})
//#endif
....

Download the file and import it locally (Download Link)

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from './dataflux-rum-miniapp.js'; // Local path to the js file
// Initialize Rum
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>', // Required, Datakit domain address. Must be added to the WeChat Mini Program admin backend domain whitelist.
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform
  env: 'testing', // Optional, mini program environment
  version: '1.0.0', // Optional, mini program version
  service: 'miniapp', // Current application service name
  trackInteractions: true, // User behavior data
  sampleRate: 100, // Percentage of metric data collected, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests allowed to inject headers required by the trace collector. Can be request origins or regular expressions.
})
//#endif
....

Configuration¶

Initialization Parameters¶

Parameter	Type	Required	Default	Description
`applicationId`	String	Yes		Application ID created from the TrueWatch platform.
`datakitOrigin`	String	Yes		DataKit data reporting Origin; ❗️ Must be added to the WeChat Mini Program admin backend request whitelist.
`env`	String	No		Current environment of the mini program application, e.g., prod: production; gray: grayscale; pre: pre-release; common: daily; local: local.
`version`	String	No		Version number of the mini program application.
`service`	String	No		Service name of the current application. Defaults to `miniapp`. Supports custom configuration.
`sampleRate`	Number	No	`100`	Percentage of metric data collected. `100` means full collection, `0` means no collection.
`trackInteractions`	Boolean	No	`false`	Whether to enable user behavior collection.
`traceType`	Enum	No	`ddtrace`	Configures the link tracing tool type. Defaults to `ddtrace` if not configured. Currently supports 6 data types: `ddtrace`, `zipkin`, `skywalking_v3`, `jaeger`, `zipkin_single_header`, `w3c_traceparent`. ❗️ 1. `opentelemetry` supports 4 types: `zipkin_single_header`, `w3c_traceparent`, `zipkin`, `jaeger`. 2. Configuring the corresponding `traceType` requires setting different `Access-Control-Allow-Headers` for the corresponding API services. Refer to How APM Connects to RUM.
`traceId128Bit`	Boolean	No	`false`	Whether to generate `traceID` in 128-byte format. Corresponds to `traceType`. Currently supports types `zipkin`, `jaeger`.
`allowedTracingOrigins`	Array	No	`[]`	List of all requests allowed to inject the headers required by the `ddtrace` collector. Can be request origins or regular expressions. Origin: `protocol (including ://), domain (or IP address) [and port number]`. Example: `["https://api.example.com", /https:\\/\\/.\\.my-api-domain\\.com/]`*
`isIntakeUrl`	Function	No	`function(url) {return false}`	Custom method to determine whether to collect corresponding resource data based on the request resource URL. Default is to collect all. Returns: `false` means to collect, `true` means not to collect. ❗️ 1. The return result of this parameter method must be Boolean type, otherwise it is considered an invalid parameter. 2. Version requirement is 2.1.13 or higher.

Note:

The DataKit domain corresponding to datakitOrigin must be added to the WeChat Mini Program admin backend request whitelist.
Currently, mini program platforms on various platforms have not perfected and unified the exposure of performance data APIs, resulting in incomplete collection of some performance data. For example, data such as Mini Program Startup, Mini Program Package Download, Script Injection may be missing on platforms other than WeChat.
Currently, the profile field in the returned data of resource request APIs uni.request and uni.downloadFile on various mini program platforms is only unsupported on WeChat Mini Program iOS systems. This leads to incomplete collection of timing-related data in collected resource information. There is currently no solution: request, downloadFile, API Support Status.
After enabling trackInteractions for user behavior collection, due to WeChat Mini Program limitations, it is impossible to collect the content and structural data of controls. Therefore, in the mini program SDK, we adopt declarative programming. By setting the data-name attribute in the template, you can add names to interactive elements, facilitating subsequent statistics and locating operation records. For example:

 <button bindtap="bindSetData" data-name="setData">setData</button>