Miniapp Integration with Uniapp Development Framework¶

Changelog

August 11, 2026:

@cloudcare/rum-uniapp: Added the allowTraceHeaderWithoutSession configuration option, default value is false; when enabled, if the current session does not hit the RUM sample rate, requests that match allowedTracingOrigins will still inject Trace Headers, but this will not force sampling or report RUM data for that session.

September 29, 2022: Added the isIntakeUrl configuration option to the initialization parameters, used to determine whether to collect resource data based on the request URL. By default, all resources are collected.

March 29, 2022:

Added traceType configuration, which sets the tracing tool type. Defaults to ddtrace if not configured. Currently supports 6 data types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, w3c_traceparent.
Added allowedTracingOrigins – the list of request origins allowed to inject headers required by the trace collector. Can be either the origin of the request or a regular expression.

Prerequisites¶

Install DataKit.

Application Integration¶

Log in to the Guance console, go to the Real User Monitoring (RUM) page, and click Create Application in the upper-left corner to start creating a new application.

On the right side, select the access method for installation configuration, click Configuration Parameters, fill in the relevant configuration parameters, and then copy the code into your project.

Usage¶

Add the following code at the top of the entry file main.js of your Uniapp project:

NPM¶

VUE 2VUE 3

Import (refer to the official Uniapp NPM import 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. The domain must be added to the whitelist in the WeChat miniapp admin console.
  applicationId: '<Application ID>', // Required, the application ID generated by the dataflux platform
  env: 'testing', // Optional, the environment of the miniapp
  version: '1.0.0', // Optional, the version of the miniapp
  service: 'miniapp', // Service name for the current application
  trackInteractions: true, // User interaction data
  sampleRate: 100, // Percentage of metric data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of origins allowed to inject trace headers. Can be request origins or regex patterns.
})
//#endif
....

Import (refer to the official Uniapp NPM import 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. The domain must be added to the whitelist in the WeChat miniapp admin console.
  applicationId: '<Application ID>', // Required, the application ID generated by the dataflux platform
  env: 'testing', // Optional, the environment of the miniapp
  version: '1.0.0', // Optional, the version of the miniapp
  service: 'miniapp', // Service name for the current application
  trackInteractions: true, // User interaction data
  sampleRate: 100, // Percentage of metric data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of origins allowed to inject trace headers. Can be request origins or regex patterns.
})
//#endif
....

CDN¶

VUE 2VUE 3

Download the file and import it locally (Download URL)

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('./dataflux-rum-miniapp.js'); // Local path of the JS file
// Initialize RUM
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address. The domain must be added to the whitelist in the WeChat miniapp admin console.
  applicationId: '<Application ID>', // Required, the application ID generated by the dataflux platform
  env: 'testing', // Optional, the environment of the miniapp
  version: '1.0.0', // Optional, the version of the miniapp
  service: 'miniapp', // Service name for the current application
  trackInteractions: true, // User interaction data
  sampleRate: 100, // Percentage of metric data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of origins allowed to inject trace headers. Can be request origins or regex patterns.
})
//#endif
....

Download the file and import it locally (Download URL)

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from './dataflux-rum-miniapp.js'; // Local path of the JS file
// Initialize RUM
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address. The domain must be added to the whitelist in the WeChat miniapp admin console.
  applicationId: '<Application ID>', // Required, the application ID generated by the dataflux platform
  env: 'testing', // Optional, the environment of the miniapp
  version: '1.0.0', // Optional, the version of the miniapp
  service: 'miniapp', // Service name for the current application
  trackInteractions: true, // User interaction data
  sampleRate: 100, // Percentage of metric data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of origins allowed to inject trace headers. Can be request origins or regex patterns.
})
//#endif
....

Configuration¶

Initialization Parameters¶

Parameter	Type	Required	Default	Description
`applicationId`	String	Yes		Application ID created from Guance.
`datakitOrigin`	String	Yes		DataKit data upload Origin; ❗️ The request domain must be added to the whitelist in the miniapp admin console.
`env`	String	No		Current environment of the miniapp, e.g., prod: production; gray: canary; pre: pre-release; common: daily; local: local.
`version`	String	No		Version number of the miniapp.
`service`	String	No	`miniapp`	Service name of the current 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 tracing tool type. 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` 4 types. 2. When configuring the corresponding `traceType`, you need to set different `Access-Control-Allow-Headers` on the relevant API service. See How APM Connects to RUM.
`traceId128Bit`	Boolean	No	`false`	Whether to generate `traceID` in 128-bit format. Corresponds to `traceType`. Currently supports `zipkin` and `jaeger`.
`allowedTracingOrigins`	Array	No	`[]`	List of request origins allowed to inject headers required by the `ddtrace` collector. Can be request origins or regular expressions. Origin format: `protocol (including ://), domain (or IP address) [and port]`. Example: `["https://api.example.com", /https:\\/\\/.\\.my-api-domain\\.com/]`*
`allowTraceHeaderWithoutSession`	Boolean	No	`false`	When the current session does not hit the sample rate, whether to still inject Trace Headers for requests that match `allowedTracingOrigins`. Enabling this will not force sampling or report RUM data for that session.
`isIntakeUrl`	Function	No	`function(url) {return false}`	A custom method to determine whether to collect resource data based on the request URL. By default, all resources are collected. Returns `false` to collect, `true` to skip. ❗️ 1. The return value of this parameter must be of type Boolean, otherwise it is considered invalid. 2. Requires version 2.1.13 or later.

Notes:

The DataKit domain corresponding to datakitOrigin must be added to the request whitelist in the miniapp admin console.
Currently, the performance data API exposure of various miniapp platforms is not fully unified, leading to incomplete collection of some performance data, such as miniapp startup, miniapp package download, script injection, etc. Except for the WeChat platform, these data may be missing on other platforms.
Currently, the profile field in the response data of the miniapp’s request resource APIs (uni.request, uni.downloadFile) is only not supported on iOS WeChat miniapps. This results in incomplete collection of timing-related resource data. There is currently no solution. See: request, downloadFile, API Support Status.
When trackInteractions (user interaction collection) is enabled, due to WeChat miniapp limitations, the content and structure data of controls cannot be captured. Therefore, in the miniapp SDK, we use declarative programming. By setting the data-name attribute in the template, you can add a name to interactive elements for easier identification of operation records during statistics. For example:

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