spy-client
Version:
spy client
159 lines (143 loc) • 5.04 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SPY Client Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/dist/spy-head.js"></script>
<script>
// 配置
window.__spyHead && window.__spyHead.init({
pid: '1_1000',
lid: 'xx',
// 数据类型：异常，触发时间：OnLoadResourceError
resourceError: {
group: 'resource',
sample: 0.1,
handler: function (data) {
}
},
// 数据类型：异常，触发时间：OnJSError
jsError: {
group: 'js',
sample: 1,
handler: function (data) {
}
},
// 数据类型：异常，触发时间：OnJudgeReturnFalseWhenTimeout
whiteScreenError: {
sample: 0.1,
group: 'whiteScreen',
selector: 'body',
subSelector: 'button1',
timeout: 2000,
handler: function (data) {
}
}
});
</script>
</head>
<body>
<!-- <div style="height: 667px;"> -->
<div id="main">
<div>open</div>
<p>
TypeScriptJavaScriptJavaScript 的超集用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页。可以在编译期间发现并纠正错误作为一种解释型语言，只能在运行时发现错误强类型，支持静态和动态类型弱类型，没有静态类型选项最终被编译成 JavaScript 代码，使浏览器可以理解可以直接在浏览器中使用支持模块、泛型和接口不支持模块，泛型或接口支持 ES3，ES4，ES5 和 ES6 等不支持编译其他 ES3，ES4，ES5 或 ES6 功能社区的支持仍在增长，而且还不是很大大量的社区支持以及大量文档和解决问题的支持
</p>
</div>
<script src="https://mss0.bdstatic.com/se/static/js/iphone/zbios/zbiosT_f69.js"></script>
<script src="/dist/spy-client.js"></script>
<script src="/dist/spy-local-cache.js"></script>
<script type="text/javascript">
const localCache = new SpyLocalCache({
storage: 'localstorage',
maxRecordLen: 300,
compress: 'no',
onAdd(log) {
// 仅保存性能异常
console.log('onAdd', log && log.type && (log.type === 'perf' || log.type === 'except'));
return log && log.type && (log.type === 'perf' || log.type === 'except');
},
onFlush(list) {
console.log('flushed list', list);
if (list.length) {
// 将回捞的日志上报的spy，记住在spy平台配置 对应group
spy.sendPost({
pid: '1_1000',
type: 'except',
group: 'localCache',
ts: Date.now(),
lid: 'xxxx',
info: {
msg: 'localcache',
pageUrl: location.href,
log: JSON.stringify(list)
}
});
}
}
});
const spy = new SpyClient({
pid: '1_1000',
lid: 'xxxx',
localCache: localCache
});
// 采用spy-client sdk内置的抽样配置，则此异常日志不管是否命中抽样，都会存在本地，同时若命中抽样，则日志发送给服务端
// 那么所有spy sdk发送的日志会存到localstorage
spy.sendExcept({
info: {
msg: 'xxxx is not undefined'
}
});
// 若自行做了抽样，那么此时则需要主动将此异常或性能日志存在本地，才能百分百保存异常信息到本地
localCache.addLog({
type: 'except',
ts: Date.now(),
lid: 'xxx',
info: {
msg: 'module "jquery" miss',
pageUrl: location.href,
}
});
if (Math.random() < 0.1) {
spy.sendExcept({
info: {
msg: 'module "jquery" miss',
pageUrl: location.href,
}
});
}
spy.sendPerf({
// 可选, 分组，默认common，用户自定义
group: 'test',
// 必须, 指标信息，每个字段为一个指标，由用户自定义
info: {
fisrtScreen: 200, // 需要你自行计算好时间再发送，不能带单位
},
// 可选，维度信息，每个字段为一个维度，由用户自定义
dim: {
os: 'ios',
netType: 'wifi'
}
});
// 当有22条如下日志时
// lzw 压缩率 68%，耗时 2ms
// huffman压缩率 21% ,耗时2ms
localCache.addLog({
type: 'perf',
info: {
res: 200,
},
});
localCache.addLog({
type: 3,
fm: 'disp',
data: [{"base":{"size":{"doc":{"w":360,"h":4875},"wind":{"w":360,"h":640},"scr":{"w":360,"h":640}},"vsb":"visible","num":16},"t":1629773746698,"path":"/s"}],
qid: 10991431029479106376,
did: '8dd09c47c7bc90c9fd7274f0ad2c581e',
q: '刘德华',
t: 1629773746698
});
</script>
</body>
</html>