spy-client 

介绍

日志采集模块，提供一系列方便的api供使用

1. 新版2.x部分API不再兼容1.x
2. 从2.1.0版本开始，不再兼容IE8及以下IE浏览器
3. 从2.1.8版本开始，兼容小程序环境（new Image类发送）；通过继承类，覆盖request方法，可以支持Node.js/跨端框架/小程序环境

安装

``
npm install spy-client --save
`

CDN方式

不是一次性3个JS都引入，具体往下看

`html









`

> 如果对于一些指标想理解更准确，看源码是最佳方式 SDK源码


> SDK的指标采集请酌情选用，不要一股脑全用上，如果只用了一项采集功能，但SDK体积太大，可以考虑自行编译，看文档最后




快速使用

初始化
`javascript
const SpyClient = require('spy-client');
const spy = new SpyClient({
pid: '1_1000', // 必须
lid: '', // 可选，页面的logid
sample: 1 // 可选，默认为1, 全局抽样，取值：[0-1], 所有发送接口都受到该抽样，单个发送接口的sample配置会覆盖该抽样。
});
`

发送性能日志
`javascript
// 发送性能日志
spy.sendPerf({
// 可选, 分组，默认common，用户自定义
group: 'test',
// 必须, 指标信息，每个字段为一个指标，由用户自定义，这里的fisrtScreen、whiteScreen等都是业务自己定义，后续会在平台上配置好，平台会从该字段取对应指标信息。
// 这些指标需要你自行计算好时间再发送，不能带单位
info: {
tcp: 1200,
domReady: 600
},
// 可选，维度信息，每个字段为一个维度，由用户自定义，这里的netType、pageType都是业务自己定义，后续会在平台上配置好，平台会从该字段取对应维度信息。
dim: {
os: 'ios',
netType: 'wifi'
}
});
`

SDK说明

SDK分两种

* 基础版SDK：提供最基础和最简单的功能，如果这些功能能满足你，那么直接使用该SDK即可，因为体积较小
* 增强版SDK：除了基础版SDK功能外，集合了丰富的常用的性能和异常指标统计

接下来分别介绍

基础版SDK

提供最基础和最简单的功能，如果这些功能能满足你，那么直接使用该SDK即可

`javascript
// basic spy-client 基本用法，最简单功能
const SpyClient = require('spy-client/dist/spy-client-basic');
const spy = new SpyClient({
pid: '1_1000', // 必须
lid: '', // 可选，页面的logid
sample: 1 // 可选，默认为1, 全局抽样，取值：[0-1], 所有发送接口都受到该抽样，单个发送接口的sample配置会覆盖该抽样。
});
`

以下先简单列举所有可用API示例
`javascript

// 发生性能日志，本质是数值型的metric数据
spy.sendPerf({
// 可选, 分组，默认common，用户自定义
group: 'test',
// 必须, 指标信息，每个字段为一个指标，由用户自定义，这里的fisrtScreen、whiteScreen等都是业务自己定义，后续会在平台上配置好，平台会从该字段取对应指标信息。
// 这些指标需要你自行计算好时间再发送，不能带单位
info: {
tcp: 1200,
domReady: 600
},
// 可选，维度信息，每个字段为一个维度，由用户自定义，这里的netType、pageType都是业务自己定义，后续会在平台上配置好，平台会从该字段取对应维度信息。
dim: {
os: 'ios',
netType: 'wifi'
}
});


// 发送异常日志
spy.sendExcept({
// 必须, 异常信息，msg字段是必须的，是异常唯一标识。其他字段作为补充信息，由用户自定义
info: {
msg: 'abc is not undefined', // msg字段是必须的，必须的，必须的，会统计相同msg的总量
stack: 'xxxxx',
file: 'xxxxxxx'
},
// 可选, 分组，默认common，用户自定义
group: 'test',
// 可选，维度信息，每个字段为一个维度，由用户自定义
dim: {
os: 'ios'
}
});

// 发送分布日志
spy.sendDist({
info: {
from: 'hao123'
},
dim: {
os: 'ios'
}
});

// 发送计数日志
spy.sendCount({
info: {
from: 'hao123'
},
dim: {
os: 'ios'
}
});

// 如果能拿到error实例，通过该方法快速上报异常，默认会获取stack等信息
spy.sendExceptForError(new Error('error'), {
dim: {
os: 'ios'
}
});

// 最基础的API，需要自行指定type字段
spy.send({
type: 'perf'
info: {
domReady: 1000
},
dim: {}
});


// 统计辅助方法
spy.startMark('playTime');
let time = spy.endMark('playTime');
console.log(time); // output: 1000

spy.startMark('pauseTime');
spy.endMark('pauseTime'); // 假设中间执行花费1s
console.log(spy.getAllMark());
// output
// {
// playTime: 1000,
// pauseTime: 1000
// }

spy.clearMark('pauseTime'); // 清除pauseTime
spy.clearAllMark(); // 清除所有mark的信息

`

基础版可支持小程序/Node.js/跨端框架环境

1 . 小程序
不用做任何修改，就支持采用new Image发送日志。

2 . Node.js/跨端框架环境

Node.js，跨端框架，以及小程序环境中若采用spy.send(xxx, true)方式，则需要继承SpyClient类，覆盖request方法.
如果是Node.js，需要服务器有外网权限

`javascript
const SpyClient = require('spy-client/dist/spy-client-basic');
// 若环境编译不支持umd，则可以导入es module
// const SpyClient = require('spy-client/dist/spy-client-basic.esm');

class SpyClientNode from SpyClient {
request(url: string, data?: any) {
axios({
method: data ? 'post' : 'get',
url,
data: data ? JSON.stringify(data) : data,
});
}
}

const spy = new SpyClientNode({
pid: '1_1000', // 必须
lid: '', // 可选，页面的logid
sample: 1 // 可选，默认为1, 全局抽样，取值：[0-1], 所有发送接口都受到该抽样，单个发送接口的sample配置会覆盖该抽样。
});
spy.sendPerf({
info: {
responseTime: 200
}
});
`

增强版SDK

增强版SDK分成了2部分

1. spy-head：有些功能我们希望越早生效越好，比如全局JS报错监控。因此把这些功能最小集抽成一个单独JS，以便可以插入head标签内，也不会全量引入整个SDK在头部。当然，放到任何地方都是可以，开发者自行决策即可。此部分包含的功能有
* 异常：全局JS报错监控、资源加载失败监控、白屏异常监控
* 性能：Longtask等信息采集，真正的统计是在spy-client里，只是越早采集，能获取更多的longtask

2. spy-client：此部分提供了丰富的性能和异常的指标统计，其中部分功能依赖于spy-head，包含的功能有
* 性能指标采集：包含体积、卡顿、速度等60+个性能指标采集方法
* 异常：包含大于150K的大图片采集、HTTPS环境下HTTP资源采集
* 辅助方式： mark系列辅助方法

> 增强版SDK仅支持浏览器环境

$3

spy-head JS可以视情况通过script内联或嵌入其他JS里

> 如果要启用一项异常监控功能，需要设置其抽样sample不为0

`html