spy client
npm install spy-client1. 新版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功能外,集合了丰富的常用的性能和异常指标统计
接下来分别介绍
`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分成了2部分
1. spy-head:有些功能我们希望越早生效越好,比如全局JS报错监控。因此把这些功能最小集抽成一个单独JS,以便可以插入head标签内,也不会全量引入整个SDK在头部。当然,放到任何地方都是可以,开发者自行决策即可。此部分包含的功能有
* 异常:全局JS报错监控、资源加载失败监控、白屏异常监控
* 性能:Longtask等信息采集,真正的统计是在spy-client里,只是越早采集,能获取更多的longtask
2. spy-client:此部分提供了丰富的性能和异常的指标统计,其中部分功能依赖于spy-head,包含的功能有
* 性能指标采集:包含体积、卡顿、速度等60+个性能指标采集方法
* 异常:包含大于150K的大图片采集、HTTPS环境下HTTP资源采集
* 辅助方式: mark系列辅助方法
> 增强版SDK仅支持浏览器环境
spy-head JS可以视情况通过script内联或嵌入其他JS里
> 如果要启用一项异常监控功能,需要设置其抽样sample不为0
`html