在Weex环境接入前端监控

导入npm包

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

npm install alife-logger --save

初始化

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

// 在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',
    // 设置uid，用于生成UV报告。
    page: 'Lazada | Home',
    // 设置初始页面名称。SDK将在初始化完成后发送PV日志。
    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，请参见初始化。

通用API：setPage()

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

import wxLogger from '/utils/monitor';
// ...
wxLogger.setPage(nextPage);

通用API：setConfig()

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

import wxLogger from '/utils/monitor';
// ...
wxLogger.setConfig(config);

日志上报API

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

通用SDK配置项

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

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