Mini Program Application Integration¶

By introducing the SDK file, collect performance metrics, error logs, and resource request data of 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 has been activated, the prerequisites are automatically configured, and you can directly integrate the application.

Install DataKit;
Configure RUM Collector;
DataKit is configured as publicly accessible on the Internet, and the IP geolocation database is installed.

Application Integration¶

Go to User Analysis > Create Application > Mini Program;
Input the application name;
Input the application ID;
Select the application integration method:
- Public Network DataWay: Directly receives RUM data without installing the DataKit collector.
- Local Environment Deployment: Receives RUM data after meeting the prerequisites.

Usage Methods¶

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 documentation on npm introduction methods

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, 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', // Current application service name
  trackInteractions: true,
  traceType: 'ddtrace', // Not required, default is 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, list of all requests that allow injection of trace collector headers. Can be request origin or regex
})

Download File for local 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, 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', // Current application service name
  trackInteractions: true,
  traceType: 'ddtrace', // Not required, default is 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, list of all requests that allow injection of trace collector headers. Can be request 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		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`	Configure the type of tracing tool, 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 services, see How APM Connects with 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 headers. Can be request origin or regex, origin:`protocol (including: //), domain name (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 data based on the requested resource URL, default collects everything. Returns: `false` means to collect, `true` means not to collect. 1. The return value of this parameter method must be of Boolean type, otherwise it is considered an invalid parameter. 2. Requires version 2.1.10 or higher.

Notes¶

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 the WeChat Mini Program request resources API wx.request, wx.downloadFile is not supported on iOS systems, which 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 restrictions in WeChat Mini Programs, it is impossible to collect content and structure data of controls. In the Mini Program SDK, we adopt declarative programming by setting the data-name attribute in the wxml file, allowing names to be added to interactive elements for easier subsequent statistics and operation record positioning, for example:

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