Integrating Mini Programs Based on the Uniapp Development Framework¶

Prerequisites¶

• Install DataKit.

Application Integration¶

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

On the right side, select the integration method for installation configuration, click Parameter Configuration on the right, fill in the relevant configuration parameters, and then copy them to your project.

Usage¶

Import the code at the top of the Uniapp project entry file main.js as follows:

NPM¶

...
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; must be added to the domain whitelist in the WeChat Mini Program management console
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform
  env: 'testing', // Optional, mini program environment
  version: '1.0.0', // Optional, mini program version
  service: 'miniapp', // Service name for the current application
  trackInteractions: true, // User action data
  sampleRate: 100, // Percentage of metric data collection; 100 means full collection, 0 means no collection
  allowedTracingUrls: ['https://api.example.com/v1/', /https:\/\/.*\.my-api-domain\.com\/v2\//], // Matches by full request URL
})
//#endif
....

...
//#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; must be added to the domain whitelist in the WeChat Mini Program management console
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform
  env: 'testing', // Optional, mini program environment
  version: '1.0.0', // Optional, mini program version
  service: 'miniapp', // Service name for the current application
  trackInteractions: true, // User action data
  sampleRate: 100, // Percentage of metric data collection; 100 means full collection, 0 means no collection
  allowedTracingUrls: ['https://api.example.com/v1/', /https:\/\/.*\.my-api-domain\.com\/v2\//], // Matches by full request URL
})
//#endif
....

CDN¶

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('./dataflux-rum-uniapp.js'); // Local path to the JS file
// Initialize Rum
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address; must be added to the domain whitelist in the WeChat Mini Program management console
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform
  env: 'testing', // Optional, mini program environment
  version: '1.0.0', // Optional, mini program version
  service: 'miniapp', // Service name for the current application
  trackInteractions: true, // User action data
  sampleRate: 100, // Percentage of metric data collection; 100 means full collection, 0 means no collection
  allowedTracingUrls: ['https://api.example.com/v1/', /https:\/\/.*\.my-api-domain\.com\/v2\//], // Matches by full request URL
})
//#endif
....

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from './dataflux-rum-uniapp.js'; // Local path to the JS file
// Initialize Rum
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address; must be added to the domain whitelist in the WeChat Mini Program management console
  applicationId: '<Application ID>', // Required, application ID generated by the dataflux platform
  env: 'testing', // Optional, mini program environment
  version: '1.0.0', // Optional, mini program version
  service: 'miniapp', // Service name for the current application
  trackInteractions: true, // User action data
  sampleRate: 100, // Percentage of metric data collection; 100 means full collection, 0 means no collection
  allowedTracingUrls: ['https://api.example.com/v1/', /https:\/\/.*\.my-api-domain\.com\/v2\//], // Matches by full request URL
})
//#endif
....

Configuration¶

Initialization Parameters¶

Trace Header URL Matching¶

allowedTracingUrls matches using the full request URL. Strings match by URL prefix, RegExp and Function receive the full URL; when a single rule requires a different propagation type, use { match, traceType }:

allowedTracingUrls: [
  'https://api.example.com/v1/',
  /https:\/\/.*\.my-api-domain\.com\/v2\//,
  function (url) {
    return url.indexOf('https://internal.example.com/') === 0
  },
  { match: 'https://otel.example.com/', traceType: 'w3c_traceparent' },
]

When delivered via remote configuration, only JSON-representable strings or { match: String, traceType } can be used; RegExp and Function cannot be delivered. allowedTracingOrigins is only used for backward compatibility with old configurations; if both parameters exist, the SDK only uses allowedTracingUrls.

Page Performance and White Screen Candidates¶

Versions 2.2.21 and above of @cloudcare/rum-uniapp collect page lifecycle, platform Performance entry, and setData duration. All duration fields are reported to TrueWatch in nanoseconds (ns).

The SDK does not capture screenshots and cannot confirm whether business content after the skeleton screen is usable. Therefore, metrics can only be used to identify performance anomalies and white screen candidates, and cannot independently prove that a visual white screen occurred on the page.

Platform Capability and Lifecycle¶

ended_before_render is only statistically meaningful when first_render_supported=true. Session renewal only splits the RUM View and does not indicate a page reload, so no conclusion of premature page exit is generated.

Rendering and setData Metrics¶

The SDK associates platform entries with page instances by route, pageId, and the latest navigationStart to avoid cross-page contamination from rapid page switching, same-route reconstruction, and delayed callbacks. Delayed setData callbacks from hidden pages, unloaded pages, or old components are not counted in the current View.

Recommended Statistics¶

For white screen candidate statistics, first filter by view_start_reason=page_load, performance_supported=true, and first_render_supported=true, then observe the following metrics:

During the startup phase, action_type=launch_attempt is also reported to calculate the coverage of native launch entries. The absence of a platform Performance entry cannot be used as evidence of zero duration or white screen.

For platform performance specifications, refer to WeChat Mini Program PerformanceEntry, WeChat Mini Program setData Performance, Douyin Mini Program createObserver, and Douyin Mini Program PerformanceEntry.

Notes:

1. The DataKit domain corresponding to datakitOrigin must be added to the request whitelist in the Mini Program management console.
2. Currently, the performance data API exposure across different mini program platforms is not yet unified, which may result in incomplete collection of some performance data, such as mini program launch, mini program package download, and script injection. Apart from the WeChat platform, data may be missing on other platforms.
3. Currently, the profile field in the returned data of each platform's mini program request resource APIs (uni.request, uni.downloadFile) is only unsupported by the iOS system for WeChat Mini Programs. This leads to incomplete collection of timing-related resource information. There is currently no solution: request, downloadFile, API support status.
4. When trackInteractions (user action collection) is enabled, due to the limitations of WeChat Mini Programs, control content and structure data cannot be collected. Therefore, in the mini program SDK, we use declarative programming. By setting the data-name attribute in the template, you can add a name to interactive elements to facilitate locating operation records in subsequent statistics. For example:

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