适用于 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 或 邮箱:smithdeng@tencent.com