@qapm/qapm-track-js

适用于 Web、微信小程序 无埋点性能监控和用户行为上报

简介

QAPM 的 web / 小程序 sdk支持如下功能：jserror的监控、页面访问的监控、网络请求的监控、web冷启动监控和用户行为监控。

注册产品

内网 在 https://sngapm.qq.com 新建产品，获取 app_key

初始化SDK，内网的 qapm_base_url 是 https://ten.sngapm.qq.com

外网 在 https://qapm.qq.com 新建产品，获取 app_key

初始化SDK，外网的 qapm_base_url 是 https://qapm.qq.com

安装sdk

npm install @qapm/qapm-track-js@5.3.2--save

引入sdk

在项目代码的入口处引入sdk的初始化代码：

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', //(必填)填写从qapm的web上获取的app_key
    version: "1.0.0", // (建议填写)发布web的版本号
    user_id: 'smithdeng', //（建议填写）用户的id,需要开发者自己设置，可通过qapmSetField设置
}
try {
    qapmWebSdkStart(QAPM_INIT_OPTION);
} catch (e) {
    console.log("qapm web sdk error", e);
}

微信小程序引入sdk

支持小程序接入，支持框架有 原生开发、taro、mpvue、uniapp（jserror和request），其余框架(wepy、kbone)正在紧密支持

在app.js引入初始化sdk的代码：

import {qapmMiniSdkStart} from "@qapm/qapm-track-js/dist/new.qapm.js";
const QAPM_INIT_OPTION = {
    qapm_base_url: "https://ten.sngapm.qq.com", //(选填)请将本域名添加到小程序域名白名单，不填默认为https://ten.sngapm.qqcom
    app_key: '31cf1620-538', //(必填)填写从qapm的web上获取的app_key
    version: "1.0.0", //(选填)填写发布小程序时的版本号，不填写默认为 wx.getAccountInfoSync().miniProgram.version获取到的值
    user_id: 'smithdeng', //（建议填写）用户的id,需要开发者自己设置，可通过qapmSetField设置
}
try {
    qapmMiniSdkStart(QAPM_INIT_OPTION);
} catch (e) {
    console.log("qapm mini sdk error", e);
}

sdk的详细参数说明

qapm_base_url : 数据上报域名
app_key : （必填）填写从qapm的web上获取的app_key
version : 小程序或者web的版本，请填写字符串
uesr_id : 用户的id，请填写字符串
encrypt : 是否采用国密加密算法，默认是false
excludeUrlRegList : 不参与性能数据采集的url的正则列表，例如[/appconfig/,/entrance/]
domLengthThreshold : 数字，白屏功能的阈值，默认是小于10个dom节点就出发白屏事件的上报
debug : 为true时开启白屏和内存使用监控，默认为false
allowHeaders : 字符串数组，除了默认的headers之外，用户额外希望采集的header

sdk的可用接口

qapmSetField

说明：用户id可以在初始化sdk之后设置，因为有的业务场景需要在代码运行之后的一段时间，才知道用户的id是什么，因此提供这个接口，来延后设置user_id等信息

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

customEvent

说明：自定义事件上报

传入： (1)category，string类型，表明事件的类型，建议全大写英文加下划线 (2)values，json，key是v1、v2、、、、v15，value是整数 (3)tags，json，key是d1、d2、、、d20和info1、info2、、、、info10，value是字符串，d1-d20长度不要超过256，info1-info10长度无限制 返回：没有返回值

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" : "富士新手推荐性价比之王拍立得相机mini7+一次成像男女学生款便宜胶片机",
        "info2" : "套餐类型:套餐一【官方标配+20张相纸+新品大礼包+配件礼包10件套】颜色分类:白色"
    }
}
customEvent(msg);

sourcemap简介

开发者需要上传sourcemap文件后，QAPM才可以根据sourcemap文件来翻译堆栈信息。小程序的sourcemap请去微信公众平台下载，web的sourcemap在打包代码时使用webpack生成。

注意事项

1、如果你们的前端部署在 CDN 中，可能会有跨域访问的问题，导致js错误采集到的堆栈全都是script error，请执行如下两个步骤： （1）入口文件的HTML的script标签中设置 crossorigin="anonymous" ，例如：

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

（2）存放js文件的 CDN 设置 Access-Control-Allow-Origin: *

2、完整采集网络的timing信息，需要设置 Timing-Allow-Origin: *

3、如果遇到无法更新到最新版(5.3.2)的情况，清一下npm的缓存就好了 npm cache clean --force

联系人：企微：smithdeng 或 邮箱：[e-mail]