Mini Program Application Integration¶

By introducing the SDK file, collect performance metrics, error logs, and resource request data from mini program applications, and report them to the TrueWatch platform to analyze the performance of mini program applications in a visual way.

Prerequisites (DataKit Integration)¶

Install DataKit.
Configure the RUM collector.
Configure DataKit to be publicly accessible and install the IP geolocation database.

Start Integration¶

Go to RUM > Create > Mini Program.
Enter the application name.
Enter the application ID.
Select the application integration method:
Public DataWay: Directly receives RUM data without installing the DataKit collector.
Local environment deployment: Receives RUM data after meeting the prerequisites.

Integration Methods¶

DataKit IntegrationPublic OpenWay

Ensure DataKit is installed and configured to be publicly accessible and has the IP geolocation database installed.
Obtain parameters such as applicationId, env, version from the console, and start integrating the application.
When integrating the SDK, set datakitOrigin to the domain name or IP of DataKit.

Obtain parameters such as applicationId, clientToken, and site from the console, and start integrating the application.
No need to configure datakitOrigin when integrating the SDK; data will be sent to the public DataWay by default.

Usage¶

Introduce the code in the mini program's app.js file as follows:

Note: The introduction must be placed before the initialization of App().

NPMCDN

For the NPM package introduction method, refer to the official WeChat npm introduction method.

const { datafluxRum } = require('@cloudcare/rum-miniapp')
// Initialize Rum
datafluxRum.init({
  datakitOrigin: '<DATAKIT ORIGIN>', // Required, Datakit domain address. Must be added to the domain whitelist in the WeChat Mini Program admin backend.
  site: "http://172.16.212.186:9529", // The domain name of the site corresponding to the public DataWay.
  clientToken: "a993f53a8ea04bc6b9350e5e670a3a3b", // Client token required for public DataWay reporting, generated when creating the application in the Guance console.
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform.
  env: 'testing', // Optional, environment of the mini program.
  version: '1.0.0', // Optional, version of the mini program.
  service: 'miniapp', // Service name of the current application.
  trackInteractions: true,
  traceType: 'ddtrace', // Optional, defaults to 'ddtrace'. Currently supports 6 types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent.
  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 the request origin or a regular expression.
})

Download the file and introduce it locally.

const { datafluxRum } = require('./lib/dataflux-rum-miniapp.js')
// Initialize Rum
datafluxRum.init({
  datakitOrigin: '<DATAKIT ORIGIN>', // Required, Datakit domain address. Must be added to the domain whitelist in the WeChat Mini Program admin backend.
  site: "http://172.16.212.186:9529", // The domain name of the site corresponding to the public DataWay.
  clientToken: "a993f53a8ea04bc6b9350e5e670a3a3b", // Client token required for public DataWay reporting, generated when creating the application in the Guance console.
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform.
  env: 'testing', // Optional, environment of the mini program.
  version: '1.0.0', // Optional, version of the mini program.
  service: 'miniapp', // Service name of the current application.
  trackInteractions: true,
  traceType: 'ddtrace', // Optional, defaults to 'ddtrace'. Currently supports 6 types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent.
  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 the request origin or a regular expression.
})

Configuration¶

Initialization Parameters¶

Parameter	Type	Required	Default Value	Description
`applicationId`	String	Yes		Application ID created from TrueWatch.
`datakitOrigin`	String	Yes		DataKit data reporting Origin. ❗️ Must be added to the request whitelist in the mini program admin backend.
`site`	String	Yes (Required for `public dataway` reporting)		Domain name of the site corresponding to the public DataWay. Note: `protocol (including ://), domain name (or IP address) [and port number]`. For example: https://www.dataway.com, http://100.20.34.3:8088.
`clientToken`	String	Yes (Required for `public dataway`)		Client token required for public DataWay reporting, generated when creating the application in the TrueWatch console.
`env`	String	No		Current environment of the mini program application, e.g., 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		Service name of the current application, defaults to `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`	Configure the link tracing tool type. If not configured, defaults to `ddtrace`. 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 service. Refer to How APM Connects to RUM.
`traceId128Bit`	Boolean	No	`false`	Whether to generate `traceID` in 128-byte format, corresponding to `traceType`. Currently supports types `zipkin`, `jaeger`.
`allowedTracingOrigins`	Array	No	`[]`	【New】List of all requests allowed to inject headers required by the `ddtrace` collector. Can be the request origin or a regular expression. 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 the corresponding resource based on the request resource URL. By default, all are collected. Return: `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.10 or higher.

Notes¶

The DataKit domain name corresponding to datakitOrigin must be added to the request whitelist in the mini program admin backend.
Because the profile field in the data returned by the current WeChat mini program resource request APIs wx.request and wx.downloadFile is not supported on iOS systems, this leads to incomplete collection of timing-related data in the collected resource information. There is currently no solution: request, downloadFile, API Support Status.
After enabling trackInteractions for user interaction collection, due to WeChat mini program limitations, it is impossible to collect the content and structure data of controls. Therefore, in the mini program SDK, we adopt a declarative programming approach. By setting the data-name attribute in the wxml file, you can add names to interactive elements, facilitating subsequent statistics and locating operation records. For example:

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