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.
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.
...importVuefrom'vue'//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUEconst{datafluxRum}=require('@cloudcare/rum-uniapp')// Initialize RUMdatafluxRum.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 platformenv:'testing',// Optional, Mini Program environmentversion:'1.0.0',// Optional, Mini Program versionservice:'miniapp',// Current application service nametrackInteractions:true,// User interaction datasampleRate:100,// Percentage of metrics data collection, 100 means full collection, 0 means no collectionallowedTracingOrigins:['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....
...//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUEimport{datafluxRum}from'@cloudcare/rum-uniapp'// Initialize RUMdatafluxRum.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 platformenv:'testing',// Optional, Mini Program environmentversion:'1.0.0',// Optional, Mini Program versionservice:'miniapp',// Current application service nametrackInteractions:true,// User interaction datasampleRate:100,// Percentage of metrics data collection, 100 means full collection, 0 means no collectionallowedTracingOrigins:['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....
...importVuefrom'vue'//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUEconst{datafluxRum}=require('./dataflux-rum-miniapp.js');// Local js file path// Initialize RUMdatafluxRum.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 platformenv:'testing',// Optional, Mini Program environmentversion:'1.0.0',// Optional, Mini Program versionservice:'miniapp',// Current application service nametrackInteractions:true,// User interaction datasampleRate:100,// Percentage of metrics data collection, 100 means full collection, 0 means no collectionallowedTracingOrigins:['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....
...//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUEimport{datafluxRum}from'./dataflux-rum-miniapp.js';// Local js file path// Initialize RUMdatafluxRum.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 platformenv:'testing',// Optional, Mini Program environmentversion:'1.0.0',// Optional, Mini Program versionservice:'miniapp',// Current application service nametrackInteractions:true,// User interaction datasampleRate:100,// Percentage of metrics data collection, 100 means full collection, 0 means no collectionallowedTracingOrigins:['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....
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:
The DataKit domain corresponding to datakitOrigin must be added to the request whitelist in the Mini Program management backend.
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.
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.
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: