本文介绍如何在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()方法相同,配置项详情请参见setConfig()

import wxLogger from '/utils/monitor';
// ...
wxLogger.setConfig(config);
表 3. wxLogger.setConfig(config)调用参数说明
参数 类型 描述 是否必需 默认值
config Object 需要修改的配置项以及值
uid String 用户ID,用于统计UV。 Storage设置

日志上报API

请参见API参考中的日志上报接口。

通用SDK配置项

ARMS前端监控提供一系列SDK配置项,让您能够通过设置参数来满足额外需求。以下是适用于本文场景的通用配置项。

参数 类型 描述 是否必选 默认值
pid String 项目唯一ID,由ARMS在创建站点时自动生成。
uid String 用户ID,用于标识访问用户,可手动配置,用于根据用户ID检索。如果不配置,则由SDK自动生成且每半年更新一次。
tag String 传入的标记,每条日志都会携带该标记。
release String 应用版本号。建议您配置,便于查看不同版本的上报信息。 undefined
environment String 环境字段,取值为:prod、gray、pre、daily和local,其中:
  • prod表示线上环境。
  • gray表示灰度环境。
  • pre表示预发环境。
  • daily表示日常环境。
  • local表示本地环境。
prod
sample Integer 日志采样配置,值为110100。性能和成功API日志按照1/sample的比例采样。 1

ARMS前端监控还提供了更多SDK配置项,可满足进一步的需求,详情请参见SDK参考