qapm-js-monitor

Web监控使用文档

一、功能说明

该功能能够监控web网络资源加载耗时、用户web操作行为、jserror监控。

二、接入步骤

1 安装包依赖

1.1 监控包依赖

使用加载对js监控包的依赖，建议使用1.0.18之后的包

npm install qapm-js-monitor --save

1.2 插件包依赖

1.2.1 下载插件包

如果您需要对jserror监控，并翻译jserror堆栈需要在编译期间使用qapm-js-plugin对符号文件上传和生成编译id。

npm install qapm-js-plugin --save-dev

1.2.2 插件使用

在webpack.conf.js中需要引入js插件并使用

//引入apm js插件
const QAPMJsPlugin = require("qapm-js-plugin");     
//初始化插件
const qapmPlugin = new QAPMJsPlugin({                
    "apiKeys": "c61b0684-14199;53416939-770",
    "baseQAPMURL": "https://sngapm.qq.com"
});
//使用插件
module.exports = {
    ...
    "plugins": [
        qapmPlugin,
        qapmPlugin.defineUUIDPlugin()
    ]
    ...
}

QAPMJsPlugin参数说明：

apiKeys: list 会使用该web的应用的appkey的列表，例如：android应用的webview和ios应用的webview都会访问该web网页，那么这需要填写android和ios应用的appkey

baseQAPMUrl: string 是上传js map的服务域名，不填写的话默认为https://sngapm.qq.com

2 QAPM JS 初始化与调用

可以依据web工程的不同做相关的调用实现。若是你使用的是es6的js项目可以参考下文中react工程使用

2.1 React工程中使用

在需要监控的web页面的Js中引入项目，例如这里需要监控全部页面可以在Main.js中添加代码如下：

1）如果你是android或者ios项目访问你的web的话可以用下面方式（需要接入Android或者ios的监控sdk），在客户端的sdk中会自动设置上报监控的app-key，uin等项目信息。

// 引用qapm js monitor模块
const {setQAPMUUID, qapmJsStart} = require("qapm-js-monitor");
// 设置UUID用于jserror堆栈翻译，这参数为字符串，如果接入了apm插件这可以直接设置为process.env.QAPM_UUID，会直接利用编译期间生成的uuid
setQAPMUUID(process.env.QAPM_UUID);
qapmJsStart();

如果没有js工程可以在你的html中使用如下方式调用

<script charset="utf-8" src="./qapm-js-moitor.js"></script>
<script>
    // 接口说明请查看2.1代码注释中介绍。此处请将process.env.QAPM_UUID传入全局变量，并在此处设置，例如：window.QAPM_PLUGIN_UUID = process.env.QAPM_UUID; 并在此处传入window.QAPM_PLUGIN_UUID
    window.addEventListener("load", function() {
    	window.QAPM.setQAPMUUID(window.QAPM_PLUGIN_UUID);
    	window.QAPM.qapmJsStart();
    });
</script>

2）如果你只是想纯粹的web应用，不存在android或ios的访问（即不接入android或ios的sdk）情况下，可以用下面的方式来初始化

// 引用qapm js monitor模块
const {setQAPMUUID, qapmJsStart} = require("qapm-js-monitor");
// 初始化 js 监控，initQAPMJs(option)，option为字典类型，里面设置参数选项，可选择如下属性：
// 		pAppKey: [tring 必须], web产品的appkey
// 		pUserId: [string 必须], 用户id
// 		pUUID: [string 必须], 如果有接入js插件，如果接入了apm插件这可以直接设置为process.env.QAPM_UUID，会直接利用编译期间生成的uuid，如果没有开启jserror监控可以设置为空
// 		pDeviceId: [string 可选 默认为空], 设备id
// 		pQAPMUrl: [string 可选 默认为‘https://sngapm.qq.com’], 设置js性能监控和jserror的上报地址
// 		pAthenaUrl: [string 可选 默认为‘https://athena.qq.com/'], 设置web用户行为上报的地址
// 		pJsErrorEnable: [bool 可选 默认为true], 是否开启jserror监控js运行错误
// 		pWebMonitorEnable: [bool 可选 默认为true]， 是否开启页面加载耗时/性能监控
//		pBreadCrumbEnable: [bool 可选 默认为true], 是否开启web的用户行为监控
let option = {
    pAppKey: '53416939-770',
    pUserId: '10000',
    pUUID: window.QAPM_PLUGIN_UUID,
    pDeviceID = 'aabbccdd'
};
initQAPMJs(option);
qapmJsStart();

2.2 html中引用js monitor

可以在html中用script标签引用监控的js文件。

<script charset="utf-8" src="./qapm-js-moitor.js"></script>
<script>
    // 接口说明请查看2.1代码注释中介绍。此处请将process.env.QAPM_UUID传入全局变量，并在此处设置，例如：window.QAPM_PLUGIN_UUID = process.env.QAPM_UUID; 并在此处传入window.QAPM_PLUGIN_UUID
    window.addEventListener("load", function() {
        var option = {
          pAppKey: '53416939-770',
          pUserId: '10000',
          pUUID: window.QAPM_PLUGIN_UUID
        };
        window.QAPM.initQAPMJs(option);
        window.QAPM.qapmJsStart();
    });
</script>

三 验证

查看console日志信息,会有类似如下的日志信息，根据你开启不同的监控打印模块初始化完成的信息

init js error finished

init web monitor finished

init user track finished, deviceid is aabbccdd useid is 10000 athena_base_url is https://athena.qq.com/