WeChat Mini Program Application Integration¶

Guance application monitoring can collect metrics data from various mini programs. By introducing the SDK file, it monitors mini program performance metrics, error logs, and resource request data, which are reported to the Guance platform. The platform then analyzes the performance of each mini program in a visual manner.

Prerequisites¶

Note: If you have enabled the RUM Headless service, the prerequisites have been automatically configured for you, and you can directly integrate the application.

Install DataKit;
Configure the RUM Collector;
Ensure DataKit is publicly accessible and has the IP geolocation database installed.

Application Integration¶

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

Usage¶

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

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

NPMCDN

NPM package introduction can refer to the official WeChat documentation on npm introduction

const { datafluxRum } = require('@cloudcare/rum-miniapp')
// Initialize Rum
datafluxRum.init({
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address; needs to be added to the 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', // Service name of the current application
  trackInteractions: true,
  traceType: 'ddtrace', // Not required, defaults to ddtrace; currently supports ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent 6 types
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Not required, list of all origins allowed to inject trace collector headers. Can be an origin or a 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 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', // Service name of the current application
  trackInteractions: true,
  traceType: 'ddtrace', // Not required, defaults to ddtrace; currently supports ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent 6 types
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Not required, list of all origins allowed to inject trace collector headers. Can be an origin or a regex
})

Configuration¶

Initialization Parameters¶

Parameter	Type	Required	Default Value	Description
`applicationId`	String	Yes		Application ID created from Guance.
`datakitOrigin`	String	Yes		DataKit Origin for data reporting; Must be added to the request whitelist in the mini program management backend.
`env`	String	No		Current environment of the mini program, such as prod (production), gray (gray release), pre (pre-release), common (daily), local (local).
`version`	String	No		Version number of the mini program.
`service`	String	No	`miniapp`	Service name of the current application, default is `miniapp`, supports custom configuration.
`sampleRate`	Number	No	`100`	Percentage of metrics data collection: `100` means full collection, `0` means no collection.
`trackInteractions`	Boolean	No	`false`	Whether to enable user interaction tracking.
`traceType`	Enum	No	`ddtrace`	Configuration for tracing tool type, defaults to `ddtrace`. Currently supports `ddtrace`, `zipkin`, `skywalking_v3`, `jaeger`, `zipkin_single_header`, `w3c_traceparent` 6 types. 1. `opentelemetry` supports `zipkin_single_header`, `w3c_traceparent`, `zipkin`, `jaeger` 4 types. 2. Configuring corresponding `traceType` requires setting different `Access-Control-Allow-Headers` for the API service, refer to How APM Connects with RUM.
`traceId128Bit`	Boolean	No	`false`	Whether to generate `traceID` in 128-bit format, corresponding to `traceType`, currently supports `zipkin`, `jaeger`.
`allowedTracingOrigins`	Array	No	`[]`	【New】List of all origins allowed to inject `ddtrace` collector headers. Can be an origin or a regex, origin:`protocol (including: //), domain (or IP address)[and port]`. 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. Returns `false` to collect, `true` not to collect. 1. The return value of this parameter method must be Boolean, otherwise it is considered invalid. 2. Requires version 2.1.10 or higher.

Notes¶

The DataKit domain corresponding to datakitOrigin must be added to the request whitelist in the mini program management backend.
Due to the current limitations of WeChat Mini Program's request resource APIs wx.request, wx.downloadFile, the profile field in returned data is not supported on iOS systems, leading to incomplete collection of resource information related to timing data. There is currently no solution: request, downloadFile, API Support Status.
After enabling trackInteractions, due to WeChat Mini Program restrictions, it cannot collect content and structure data of controls. Therefore, in the mini program SDK, we use declarative programming by setting the data-name attribute in the wxml files to add names to interactive elements, making it easier to track operation records, for example:

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