Skip to content

Integration of Mini Programs Based on the Uniapp Development Framework


Changelog

2022.9.29: A new isIntakeUrl configuration has been added to the initialization parameters, which determines whether to collect data for corresponding resources based on the request resource URL. By default, all resources are collected.

2022.3.29:

  • Added the traceType configuration to specify the type of tracing tool. If not configured, it defaults to ddtrace. Currently supports 6 data types: ddtrace, zipkin, skywalking_v3, jaeger, zipkin_single_header, and w3c_traceparent.
  • Added allowedTracingOrigins to allow headers required by trace collectors for all request lists. This can be a request origin or a regular expression.

Prerequisites

Application Integration

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

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

Usage

In the entry file main.js of the Uniapp project, introduce the code as follows at the top:

NPM

Introduction (refer to the official npm introduction 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. Must add domain whitelist in WeChat Mini Program management backend.
  applicationId: '<Application ID>', // Required, Application ID generated by dataflux platform
  env: 'testing', // Optional, Mini Program environment
  version: '1.0.0', // Optional, Mini Program version
  service: 'miniapp', // Current application service name
  trackInteractions: true, // User interaction data
  sampleRate: 100, // Percentage of metrics data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests that need to inject trace collector headers. Can be a request origin or a regex
})
//#endif
....

Introduction (refer to the official npm introduction 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. Must add domain whitelist in WeChat Mini Program management backend.
  applicationId: '<Application ID>', // Required, Application ID generated by dataflux platform
  env: 'testing', // Optional, Mini Program environment
  version: '1.0.0', // Optional, Mini Program version
  service: 'miniapp', // Current application service name
  trackInteractions: true, // User interaction data
  sampleRate: 100, // Percentage of metrics data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests that need to inject trace collector headers. Can be a request origin or a regex
})
//#endif
....

CDN

Local file download method (Download Link)

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('./dataflux-rum-miniapp.js'); // Local js file path
// Initialize RUM
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address. Must add domain whitelist in WeChat Mini Program management backend.
  applicationId: '<Application ID>', // Required, Application ID generated by dataflux platform
  env: 'testing', // Optional, Mini Program environment
  version: '1.0.0', // Optional, Mini Program version
  service: 'miniapp', // Current application service name
  trackInteractions: true, // User interaction data
  sampleRate: 100, // Percentage of metrics data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests that need to inject trace collector headers. Can be a request origin or a regex
})
//#endif
....

Local file download method (Download Link)

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from './dataflux-rum-miniapp.js'; // Local js file path
// Initialize RUM
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>',// Required, DataKit domain address. Must add domain whitelist in WeChat Mini Program management backend.
  applicationId: '<Application ID>', // Required, Application ID generated by dataflux platform
  env: 'testing', // Optional, Mini Program environment
  version: '1.0.0', // Optional, Mini Program version
  service: 'miniapp', // Current application service name
  trackInteractions: true, // User interaction data
  sampleRate: 100, // Percentage of metrics data collection, 100 means full collection, 0 means no collection
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // Optional, list of all requests that need to inject trace collector headers. Can be a request origin or a regex
})
//#endif
....

Configuration

Initialization Parameters

Parameter Type Required Default Value Description
applicationId String Yes The Application ID created in Guance.
datakitOrigin String Yes DataKit reporting Origin;
⚠ Must add this domain to the request whitelist in the Mini Program management backend.
env String No The current environment of the Mini Program, 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.
service String No miniapp Service name of the current application. Supports custom configuration.
sampleRate Number No 100 Percentage of metrics data collection.
100 indicates full collection, 0 indicates no collection
trackInteractions Boolean No false Whether to enable user interaction collection.
traceType Enum No ddtrace Configures the type of tracing tool. 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 four types.
2. Configuring the corresponding traceType requires setting different Access-Control-Allow-Headers for the respective API services, refer to How APM Connects with RUM.
traceId128Bit Boolean No false Whether to generate traceID using 128 bytes, corresponding to traceType. Currently supports zipkin, jaeger.
allowedTracingOrigins Array No [] List of all requests that need to inject ddtrace collector headers. Can be a request origin or a regex, origin:protocol (including: //), domain name (or IP address) [and port number]. 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 corresponding resources based on the request resource URL. Returns false to indicate collection is needed, true to indicate no collection is needed.
⚠
1. The return value of this parameter method must be of Boolean type, otherwise it will be considered an invalid parameter.
2. Requires version 2.1.13 or higher.

Note:

  1. The DataKit domain corresponding to datakitOrigin must be added to the request whitelist in the Mini Program management backend.
  2. Performance data APIs for various platform Mini Programs are not yet fully unified, so some performance data cannot be fully collected, such as Mini Program launch, Mini Program package download, script injection, etc., which may be missing on platforms other than WeChat.
  3. The profile field in the returned data of the uni.request and uni.downloadFile APIs for Mini Programs is currently unsupported on iOS systems of WeChat Mini Programs, leading to incomplete collection of timing-related data. There is currently no solution: request, downloadFile, API Support Status.
  4. After enabling trackInteractions for user interaction collection, due to restrictions in WeChat Mini Programs, it is not possible to collect control content and structure data. Therefore, in the Mini Program SDK, we use declarative programming. By setting the data-name attribute in the board, names can be added to interactive elements for easier statistical tracking and operation record positioning, for example:
 <button bindtap="bindSetData" data-name="setData">setData</button>

Feedback

Is this page helpful? ×