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 specify the type of tracing tool. Default is ddtrace if not configured. Currently supports ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent 6 data types.
Added allowedTracingOrigins to allow all request lists that require header injection for trace collectors. Can be the origin of the request or a regular expression.

Prerequisites¶

Install DataKit.

Application Integration¶

Log in to the Guance console, navigate to the RUM page, and 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 to your project for use.

Usage¶

Introduce the code in the header of the Uniapp project entry file main.js as follows:

NPM¶

VUE 2VUE 3

Reference (see uniapp official npm introduction method)

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('@cloudcare/rum-uniapp')
// Initialize Rum
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, Datakit domain address. Needs to be added to the WeChat Mini Program management backend 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 interaction data.
  sampleRate: 100, // Percentage of metric data collection, 100 means full collection, 0 means no collection.
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, all request lists that allow header injection for trace collectors. Can be the origin of the request or a regular expression.
})
//#endif
....

Reference (see uniapp official npm introduction method)

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from '@cloudcare/rum-uniapp'
// Initialize Rum
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, Datakit domain address. Needs to be added to the WeChat Mini Program management backend 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 interaction data.
  sampleRate: 100, // Percentage of metric data collection, 100 means full collection, 0 means no collection.
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, all request lists that allow header injection for trace collectors. Can be the origin of the request or a regular expression.
})
//#endif
....

CDN¶

VUE 2VUE 3

Download the file and introduce 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. Needs to be added to the WeChat Mini Program management backend 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 interaction data.
  sampleRate: 100, // Percentage of metric data collection, 100 means full collection, 0 means no collection.
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, all request lists that allow header injection for trace collectors. Can be the origin of the request or a regular expression.
})
//#endif
....

Download the file and introduce 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. Needs to be added to the WeChat Mini Program management backend 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 interaction data.
  sampleRate: 100, // Percentage of metric data collection, 100 means full collection, 0 means no collection.
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, all request lists that allow header injection for trace collectors. Can be the origin of the request or a regular expression.
})
//#endif
....

Configuration¶

Initialization Parameters¶

Parameter	Type	Required	Default	Description
`applicationId`	String	Yes		Application ID created from Guance.
`datakitOrigin`	String	Yes		DataKit data reporting Origin; ❗️ Needs to be added to the mini program management backend request whitelist.
`env`	String	No		Current environment of the mini program application, such as prod: production environment; gray: gray environment; pre: pre-release environment; common: daily environment; local: local environment.
`version`	String	No		Version number of the mini program application.
`service`	String	No		Current application service name, default is `miniapp`, supports custom configuration.
`sampleRate`	Number	No	`100`	Percentage of metric data collection.
`100` means full collection, `0` means no collection
`trackInteractions`	Boolean	No	`false`	Whether to enable user interaction collection.
`traceType`	Enum	No	`ddtrace`	Specifies the type of tracing tool. Default is `ddtrace` if not configured. Currently supports `ddtrace`, `zipkin`, `skywalking_v3`, `jaeger`, `zipkin_single_header`, `w3c_traceparent` 6 data types. ❗️ 1. `opentelemetry` supports `zipkin_single_header`, `w3c_traceparent`, `zipkin`, `jaeger` 4 types. 2. Configuring the corresponding traceType requires setting different `Access-Control-Allow-Headers` for the corresponding API services. Refer to How to Associate APM with RUM.
`traceId128Bit`	Boolean	No	`false`	Whether to generate `traceID` in 128 bytes. Corresponds to `traceType`, currently supports `zipkin`, `jaeger`.
`allowedTracingOrigins`	Array	No	[`[]`	All request lists that allow header injection for `ddtrace` collectors. Can be the origin of the request or a regular expression, 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 of Boolean type, otherwise it is considered an invalid parameter. 2. Version requirement is 2.1.13 and above.

Note:

The DataKit domain corresponding to datakitOrigin must be added to the mini program management backend request whitelist.
Currently, mini program platforms do not have a complete and unified API exposure for performance data, so some performance data may not be fully collected, such as mini program startup, mini program package download, script injection, etc. Except for the WeChat platform, there may be missing data.
Currently, the request resource API uni.request, uni.downloadFile in mini program platforms does not return the profile field in the returned data for WeChat Mini Program iOS systems, which may result in incomplete timing-related data collection. Currently, there is no solution: request, downloadFile, API Support.
After enabling trackInteractions for user interaction collection, due to WeChat Mini Program limitations, it is not possible to collect the content and structure data of controls. Therefore, in the mini program SDK, we adopt declarative programming by setting the data-name attribute in the template to add names to interactive elements, facilitating subsequent statistical positioning of operation records. Example:

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