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 Guance platform for visual analysis of the mini program's performance.

Prerequisites¶

Note

If RUM Headless service is already enabled, the prerequisites are automatically configured, and you can directly integrate the application.

Install DataKit;
Configure RUM Collector;
DataKit should be configured as publicly accessible over the Internet and with the IP geolocation database installed.

Application Integration¶

Go to User Analysis > Create > Mini Program;
Input the application name;
Input 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.

Usage Method¶

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

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

NPMCDN

NPM package introduction can 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; needs to be added to the domain whitelist in the WeChat Mini Program management backend
  applicationId: '<Application ID>', // Required, the application ID generated by the dataflux platform
  env: 'testing', // Optional, the environment of the mini program
  version: '1.0.0', // Optional, the version of the mini program
  service: 'miniapp', // Current service name of the application
  trackInteractions: true,
  traceType: 'ddtrace', // Not required, 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/],  // Not required, a list of all requests that allow injection of trace headers. Can be origin or regex.
})

Download file local way introduction

const { datafluxRum } = require('./lib/dataflux-rum-miniapp.js')
// Initialize Rum
datafluxRum.init({
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, Datakit domain address; needs to be added to the domain whitelist in the WeChat Mini Program management backend
  applicationId: '<Application ID>', // Required, the application ID generated by the dataflux platform
  env: 'testing', // Optional, the environment of the mini program
  version: '1.0.0', // Optional, the version of the mini program
  service: 'miniapp', // Current service name of the application
  trackInteractions: true,
  traceType: 'ddtrace', // Not required, 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/],  // Not required, a list of all requests that allow injection of trace headers. Can be origin or regex.
})

Configuration¶

Initialization Parameters¶

Parameter	Type	Required	Default Value	Description
`applicationId`	String	Yes		Application ID created from Guance.
`datakitOrigin`	String	Yes		DataKit data reporting Origin; Needs to be added to the request whitelist in the Mini Program management backend.
`env`	String	No		Current environment of the mini program application, 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 application.
`service`	String	No	`miniapp`	Current service name of the application, 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`	Configures the type of tracing tool used; if not configured, defaults to `ddtrace`. Currently supports 6 types of data: `ddtrace`, `zipkin`, `skywalking_v3`, `jaeger`, `zipkin_single_header`, `w3c_traceparent`. 1. `opentelemetry` supports 4 types: `zipkin_single_header`, `w3c_traceparent`, `zipkin`, `jaeger`. 2. Configuring 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-bit format, corresponding to `traceType`, currently supports types `zipkin`, `jaeger`.
`allowedTracingOrigins`	Array	No	`[]`	【New】List of all requests that allow injection of `ddtrace` collector required headers. Can be request origin or regex, origin:`protocol (including: //), domain (or IP address)[and port]`. 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 requested resources based on URL, default collects all resources. Returns: `false` indicates collection needed, `true` indicates no collection needed. 1. This parameter's return value must be of Boolean type, otherwise it will be considered invalid. 2. Version requirement is 2.1.10 or higher.

Note¶

The DataKit domain name corresponding to datakitOrigin must be added to the request whitelist in the Mini Program management backend.
Due to current limitations, the profile field in the returned data of WeChat Mini Program request resource APIs wx.request, wx.downloadFile is not supported on iOS systems, which 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 interaction collection, due to WeChat Mini Program restrictions, it is impossible to collect content and structural data of controls. Therefore, declarative programming is used in the Mini Program SDK, where adding the data-name attribute in the wxml file allows naming interactive elements, facilitating subsequent statistics and operation record positioning, for example:

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