Integration of Mini Programs Based on the Uniapp Development Framework¶

Changelog

2022.9.29: A new isIntakeUrl configuration has been added to the initialization parameters, which determines whether to collect data for corresponding resources based on the request resource URL. By default, all resources are collected.

2022.3.29:

Added the traceType configuration to specify the type of tracing tool. If not configured, it defaults to ddtrace. Currently supports 6 data types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, and w3c_traceparent.
Added allowedTracingOrigins to allow headers required by trace collectors for all request lists. This can be a request origin or a regular expression.

Prerequisites¶

Install DataKit.

Application Integration¶

Log in to the Guance console, go to the Synthetic Tests page, click the top-left corner Create Application to start creating a new application.

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

Usage¶

In the entry file main.js of the Uniapp project, introduce the code as follows at the top:

NPM¶

VUE 2VUE 3

Introduction (refer to the 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. Must add domain whitelist in WeChat Mini Program management backend.
  applicationId: '<Application ID>', // Required, Application ID generated by 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 metrics data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests that need to inject trace collector headers. Can be a request origin or a regex
})
//#endif
....

Introduction (refer to the 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. Must add domain whitelist in WeChat Mini Program management backend.
  applicationId: '<Application ID>', // Required, Application ID generated by 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 metrics data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests that need to inject trace collector headers. Can be a request origin or a regex
})
//#endif
....

CDN¶

VUE 2VUE 3

Local file download method (Download Link)

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('./dataflux-rum-miniapp.js'); // Local js file path
// Initialize RUM
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address. Must add domain whitelist in WeChat Mini Program management backend.
  applicationId: '<Application ID>', // Required, Application ID generated by 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 metrics data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests that need to inject trace collector headers. Can be a request origin or a regex
})
//#endif
....

Local file download method (Download Link)

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from './dataflux-rum-miniapp.js'; // Local js file path
// Initialize RUM
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address. Must add domain whitelist in WeChat Mini Program management backend.
  applicationId: '<Application ID>', // Required, Application ID generated by 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 metrics data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests that need to inject trace collector headers. Can be a request origin or a regex
})
//#endif
....

Configuration¶

Initialization Parameters¶

Parameter	Type	Required	Default Value	Description
`applicationId`	String	Yes		The Application ID created in Guance.
`datakitOrigin`	String	Yes		DataKit reporting Origin; Must add this domain to the request whitelist in the Mini Program management backend.
`env`	String	No		The current environment of the Mini Program, such as prod: production environment; gray: gray release environment; pre: pre-release environment; common: daily environment; local: local environment.
`version`	String	No		Version number of the Mini Program.
`service`	String	No	`miniapp`	Service name of the current application. Supports custom configuration.
`sampleRate`	Number	No	`100`	Percentage of metrics data collection.
`100` indicates full collection, `0` indicates no collection
`trackInteractions`	Boolean	No	`false`	Whether to enable user interaction collection.
`traceType`	Enum	No	`ddtrace`	Configures the type of tracing tool. Defaults to `ddtrace` if not configured. Currently supports 6 data types: `ddtrace`, `zipkin`, `skywalking_v3`, `jaeger`, `zipkin_single_header`, `w3c_traceparent`. 1. `opentelemetry` supports `zipkin_single_header`, `w3c_traceparent`, `zipkin`, `jaeger` four types. 2. Configuring the corresponding traceType requires setting different `Access-Control-Allow-Headers` for the respective API services, refer to How APM Connects with RUM.
`traceId128Bit`	Boolean	No	`false`	Whether to generate `traceID` using 128 bytes, corresponding to `traceType`. Currently supports `zipkin`, `jaeger`.
`allowedTracingOrigins`	Array	No	`[]`	List of all requests that need to inject `ddtrace` collector headers. Can be a request origin or a regex, origin:`protocol (including: //), domain name (or IP address) [and port number]`. For example: `["https://api.example.com", /https:\\/\\/.\\.my-api-domain\\.com/]`*
`isIntakeUrl`	Function	No	`function(url) {return false}`	Custom method to determine whether to collect data for corresponding resources based on the request resource URL. Returns `false` to indicate collection is needed, `true` to indicate no collection is needed. 1. The return value of this parameter method must be of Boolean type, otherwise it will be considered an invalid parameter. 2. Requires version 2.1.13 or higher.

Note:

The DataKit domain corresponding to datakitOrigin must be added to the request whitelist in the Mini Program management backend.
Performance data APIs for various platform Mini Programs are not yet fully unified, so some performance data cannot be fully collected, such as Mini Program launch, Mini Program package download, script injection, etc., which may be missing on platforms other than WeChat.
The profile field in the returned data of the uni.request and uni.downloadFile APIs for Mini Programs is currently unsupported on iOS systems of WeChat Mini Programs, leading to incomplete collection of timing-related data. There is currently no solution: request, downloadFile, API Support Status.
After enabling trackInteractions for user interaction collection, due to restrictions in WeChat Mini Programs, it is not possible to collect control content and structure data. Therefore, in the Mini Program SDK, we use declarative programming. By setting the data-name attribute in the board, names can be added to interactive elements for easier statistical tracking and operation record positioning, for example:

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