Suitable for Web, WeChat Mini Program without hidden points performance monitoring and user behavior reporting

Introduction

QAPM's web/mini program SDK supports the following functions: jserror monitoring, page access monitoring, network request monitoring, web cold start monitoring and user behavior monitoring.

Register product

Intranet Create a new product at https://sngapm.qq.com and obtain app_key

Initialize the SDK, the qapm_base_url of the intranet is https://ten.sngapm.qq.com

Extranet Create a new product at https://qapm.qq.com and obtain app_key

Initialize the SDK, the qapm_base_url of the external network is https://qapm.qq.com

Install sdk

npm install @qapm/[email protected]

##Introduce sdk

Introduce the SDK initialization code at the entry of the project code:

import {qapmWebSdkStart} from "@qapm/qapm-track-js/dist/new.qapm.js";
const QAPM_INIT_OPTION = {
     qapm_base_url: "https://ten.sngapm.qq.com",
     app_key: 'b578bb37-1226', //(required) fill in the app_key obtained from qapm's web
     version: "1.0.0", // (recommended to fill in) the version number of the published web
     user_id: 'smithdeng', // (recommended) The user's id needs to be set by the developer himself, which can be set through qapmSetField
}
try {
     qapmWebSdkStart(QAPM_INIT_OPTION);
} catch (e) {
     console.log("qapm web sdk error", e);
}

WeChat applet introduces sdk

Supports mini program access, supported frameworks include native development, taro, mpvue, uniapp (jserror and request), and other frameworks (wepy, kbone) are being closely supported

Introduce the code to initialize the sdk in app.js:

import {qapmMiniSdkStart} from "@qapm/qapm-track-js/dist/new.qapm.js";
const QAPM_INIT_OPTION = {
     qapm_base_url: "https://ten.sngapm.qq.com", //(optional) Please add this domain name to the mini program domain name whitelist. If left blank, the default is https://ten.sngapm.qqcom
     app_key: '31cf1620-538', //(required) fill in the app_key obtained from qapm's web
     version: "1.0.0", //(optional) fill in the version number when publishing the applet, if not filled in, the default value is the value obtained by wx.getAccountInfoSync().miniProgram.version
     user_id: 'smithdeng', // (recommended) The user's id needs to be set by the developer himself, which can be set through qapmSetField
}
try {
     qapmMiniSdkStart(QAPM_INIT_OPTION);
} catch (e) {
     console.log("qapm mini sdk error", e);
}

Detailed parameter description of sdk

qapm_base_url: data reporting domain name
app_key: (required) fill in the app_key obtained from qapm's web
version: Mini program or web version, please fill in the string
uesr_id: user's id, please fill in the string
encrypt: whether to use the national encryption algorithm, the default is false
excludeUrlRegList: Regular list of URLs that do not participate in performance data collection, such as [/appconfig/,/entrance/]
domLengthThreshold: Number, the threshold of the white screen function, the default is less than 10 DOM nodes to start reporting the white screen event
debug: Turn on white screen and memory usage monitoring when true, default is false
allowHeaders: String array, in addition to the default headers, additional headers that the user wants to collect

Available interfaces of sdk

qapmSetField

Note: The user ID can be set after initializing the SDK, because some business scenarios require a period of time after the code is run to know what the user ID is, so this interface is provided to delay setting user_id and other information.

import {qapmSetField} from "@qapm/qapm-track-js/dist/new.qapm.js";
var userId = "xxx";
qapmSetField("user_id", userId);

customEvent

Description: Custom event reporting

Pass in: (1)category, string type, indicates the type of event. It is recommended to use all uppercase letters and underlines in English. (2) values, json, key is v1, v2,,,, v15, value is an integer (3) tags, json, the key is d1, d2,,,d20 and info1, info2,,,,info10, the value is a string, the length of d1-d20 should not exceed 256, the length of info1-info10 is unlimited Return: no return value

import {customEvent} from "@qapm/qapm-track-js/dist/new.qapm.js";
var msg = {
     "category":"CLICK_BUY_BUTTON",
     "values":{
         "v1" : 748,
         "v2" : 1
     },
     "tags":{
         "d1" : "FUJI mini7+",
         "d2" : "package:1",
         "d3" : "color:white",
         "info1" : "Fuji newbies recommend the cost-effective instant camera mini7+ one-time imaging cheap film camera for male and female students",
         "info2" : "Package type: Package 1 [Official standard + 20 pieces of photo paper + new product gift pack + 10-piece accessory gift pack] Color classification: white"
     }
}
customEvent(msg);

Introduction to sourcemap

Developers need to upload the sourcemap file before QAPM can translate the stack information based on the sourcemap file. Please go to [WeChat Public Platform] (https://mp.weixin.qq.com/) to download the sourcemap of the mini program. The sourcemap of the web is generated using webpack when packaging the code.

Precautions

1. If your front-end is deployed in a CDN, there may be cross-domain access problems, resulting in js error collected stacks all being script error. Please perform the following two steps: (1) Set crossorigin="anonymous" in the HTML script tag of the entry file, for example:

<script src="https://cdn-125xxxxxxx.app~5axxxxx.js" crossorigin="anonymous"></script>

(2) CDN setting for storing js files Access-Control-Allow-Origin: *

2. To completely collect the timing information of the network, you need to set Timing-Allow-Origin: *

3. If you are unable to update to the latest version (5.3.5), just clear the npm cache npm cache clean --force

Contact person: Qiwei: smithdeng or email: [email protected]