前端异常监控、vue异常监控、js异常监控、页面性能监控、设备信息采集
npm install monitorjs_horse
1、支持es6方式引入
import { MonitorJS } from "monitorjs_horse";
2、支持commonjs方式引入
const MonitorJS = require("monitorjs_horse");
3、支持AMD方式引入
define(['monitorjs_horse'],(MonitorJS)=>{});
4、支持
`
$3
`
1）异常监控初始化代码：
new MonitorJS().init({
url:"", //错误上报地址
consoleError:true, //配置是否需要记录console.error错误信息
vueError:true, //配置是否需要记录vue错误信息
vue:Vue, //如需监控vue错误信息，则需要传入vue
extendsInfo:{ //自定义扩展信息，一般用于数据持久化区分
a:"", //自定义信息a（名称可自定义）可参考测试栗子 module
b:"", //自定义信息b（名称可自定义）
getDynamic:()=>{ //获取动态传参 1.4.5版本及以后支持该方式
}
}
});
2）参数说明：
{
url ：错误上报地址
jsError ：配置是否需要监控js错误 （默认true）
promiseError ：配置是否需要监控promise错误 （默认true）
resourceError ：配置是否需要监控资源错误 （默认true）
ajaxError ：配置是否需要监控ajax错误 （默认true）
consoleError ：配置是否需要监控console.error错误 （默认false）
vueError ：配置是否需要记录vue错误信息 （默认false）
vue ： 如需监控vue错误信息，则需要传入vue
extendsInfo : { //自定义扩展信息，一般用于数据持久化区分
a:"", //自定义信息a（名称可自定义）可参考测试栗子 module
b:"", //自定义信息b（名称可自定义）
getDynamic:()=>{ //获取动态传参 1.4.5版本及以后支持该方式
}
}
}
3）响应（持久化数据）说明：
{
category:"", //错误类型(枚举)：js_error 、resource_error、vue_error、promise_error、ajax_error、console_info、console_warn、console_error、unknow_error
logType: "Info", //日志类型(枚举) Error、Warning、Info
logInfo: "", //记录的信息
deviceInfo:"", //设备信息(JSON字符串)
...extendsInfo //自定义扩展信息，一般用于数据持久化区分【如：1、项目区分(Project)；2、错误大类区分（前端错误、后端错误 等等）】
}
`
$3
`
1）页面性能信息采集代码：
new MonitorJS().monitorPerformance({
pageId:"page_0001", //页面唯一标示
url:"", //信息采集上报地址
isPage:true, //是否上报页面性能数据，默认true
isResource:true, //是否上报页面资源数据，默认true
isRNetworkSpeed:true, //是否需要上报网速，默认false
isRScript:false, //资源数据细分，是否上报，默认true
isRCSS:false, //资源数据细分，是否上报CSS数据，默认true
isRFetch :false, //资源数据细分，是否上报Fetch数据，默认true
isRXHR :false, //资源数据细分，是否上报XHR数据，默认true
isRLink:false, //资源数据细分，是否上报Link，默认true
isRIMG :false, //资源数据细分，是否上报IMG数据，默认true
extendsInfo:{ //扩展信息，一般用于数据数据持久化区分
module:"项目",
filterOne: "page_0001",
getDynamic:()=>{
return {
filterTow:()=>{},
};
}
}
});
2）参数说明：
{
pageId ：页面唯一标示
url ：信息采集上报地址
}
3）响应（持久化数据）说明：
{
time: 1565161213722, //上报时间
deviceInfo: "", //设备信息
markUser: "", //用户标示
markUv: "", //uv采集
pageId: "", //页面唯一标示
performance: {
analysisTime: 1825, //解析dom树耗时
appcacheTime: 0, //DNS 缓存时间
blankTime: 8, //白屏时间
dnsTime: 0, //DNS 查询时间
domReadyTime: 53, //domReadyTime
loadPage: 1878, //页面加载完成的时间
redirectTime: 0, //重定向时间
reqTime: 8, //请求时间
tcpTime: 0, //tcp连接耗时
ttfbTime: 1, //读取页面第一个字节的时间
unloadTime: 0, //卸载页面的时间
},
resourceList: [
{
dnsTime: 1562.2399999992922, //dns查询耗时
initiatorType: "img", //发起资源类型
name: "https://pic.xiaohuochai.site/blog/chromePerformance1.png", //请求资源路径
nextHopProtocol: "http/1.1", //http协议版本
redirectTime: 0, //重定向时间
reqTime: 1.1899999808520079, //请求时间
tcpTime: 33.76000002026558, //tcp链接耗时
}
],
}
``