本文介绍如何在 Weex 环境中开始使用 ARMS 前端监控。

导入 npm 包

如需在 Weex 环境中使用 ARMS 前端监控,则首先需要在项目中执行以下命令导入 alife-logger npm 包,以使用专门的 WeexLogger 模块来上报日志。

npm install alife-logger --save

初始化

/utils 目录下创建 monitor.js 文件,并按照以下示例代码完成 SDK 初始化。

说明 在 Weex 应用入口调用 singleton(props) 静态方法获取实例时,需要在传入的 props 中设定相关配置,详情参见通用 API:@static singleton()通用 API:setPage()通用 API:setConfig()
// in monitor.js
import WeexLogger from 'alife-logger/weex';

const fetch = weex.requireModule('stream').fetch;
const serialize = (data) => {
data = data || {};
var arr = [];
for (var k in data) {
if (Object.prototype.hasOwnProperty.call(data, k) && data[k] !== undefined) {
arr.push(k + '=' + encodeURIComponent(data[k]).replace(/\(/g, '%28').replace(/\)/g, '%29'));
}
}
return arr.join('&');
}

// 初始化SDK。
const wxLogger = WeexLogger.singleton({
pid: 'your-project-id',
uid: 'zhangsan', // Login uid, for UV report
page: 'Lazada | Home', // Initial page name, if passed, SDK will send a PV log after Initialization completed
imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', // 设定日志上传地址。如需部署至新加坡地域,则改为'https://arms-retcode-sg.aliyuncs.com/r.png?'。
// 设置GET上报方法,示例如下:
sendRequest: (data, imgUrl) => {
const url = imgUrl + serialize(data);
fetch({
method: 'GET',
url
});
},
// 设置POST上报方法,示例如下:
postRequest: (data, imgUrl) => {
fetch({
method: 'POST',
type: 'json',
url: imgUrl,
body: JSON.stringify(data)
});
}
});

export default wxLogger;

上报

通过实例调用相应的上报方法进行上报。

// in some biz module
import wxLogger from '/utils/monitor';
wxLogger.api('/search.do', true, 233, 'SUCCESS');

通用 API:@static singleton()

@static singleton() 为静态方法,作用是返回一个单例对象。props 只在第一次调用时生效,用法如下表所示。

此方法可用于在应用入口初始化 SDK,示例参见初始化

表 1. WeexLogger.singleton(props) 调用参数说明
属性 类型 描述 是否必需 默认值
pid String 站点 ID
page String 初始化的 Page Name
uid String 用户 ID
imgUrl String 日志上传地址,以“?”结尾

通用 API:setPage()

setPage() 的作用是设置当前页面的 Page Name,并且默认上报一次 PV 日志。

import wxLogger from '/utils/monitor';
// ...
wxLogger.setPage(nextPage);
表 2. wxLogger.setPage(nextPage) 调用参数说明
参数 类型 描述 是否必需 默认值
nextPage String Page Name

通用 API:setConfig()

setConfig() 的作用是在 SDK 初始化完成后修改部分配置项,具体配置与 singleton() 方法相同。

import wxLogger from '/utils/monitor';
// ...
wxLogger.setConfig(next);
表 3. wxLogger.setConfig(next) 调用参数说明
参数 类型 描述 是否必需 默认值
next Object 需要修改的配置项以及值

日志上报 API

请参见 API 使用指南的日志上报接口。