基于前端的异常轨迹分析
npm install zf-front-abtrack基于前端的异常用户行为分析
基于前端的用户异常行为分析，将用户可能存在的困扰更及时准确的反馈给我们
``javascript`
import UserPath from 'zf-front-abtrack'
new UserPath({
aesKey: '1234567890abcabc',
request: {
// axios实例
axios: axios
}
}).then((res) => {
console.log(res)
})
`javascript`
import UserPath from 'zf-front-abtrack'
const up = new UserPath({ aesKey: '1234567890abcdab' })
// then 和report都支持链式调用
up.then((res) => {
console.log(res)
})
up.report('click', 'a元素')
// 页面跳转需要手动调用report
up.report('page', 'url', {
from: '上一个页面url，可以是相对路径，可不填',
to: '当前页面url，可以是相对路径，可不填',
mode: 'history(默认)/hash'
})
| 错误码 | 含义 | 补充说明 |
| :----------: | :----------------------: | :---------------------------------------: |
| click | 点击事件 | - |
| page | 页面切换 | 支持 hash 模式以及 history 模式的单页路由 |
| ajax | 发起请求 | 只拦截了 axios 方式的请求 |
| ajaxResponse | 返回的请求 | 只拦截了 axios 方式的请求 |
| u-001 | 请求超时 | 只拦截了 axios 方式的请求 |
| u-002 | 连续多次请求超时 | 只拦截了 axios 方式的请求 |
| u-003 | 不连续多次请求超时 | 只拦截了 axios 方式的请求 |
| u-004 | 连续点击多次 | - |
| u-005 | 不连续点击多次 | - |
| u-006 | 页面停留超时 | - |
| u-007 | 页面来回跳转 | - |
| u-008 | 页面刷新或则跳转或则关闭 | - |
`javascript`
{
// 操作相关入参
operate : {
// 连续点击
continuousNums: 3,
// 多次点击
multipleNums: 5,
// 需要监听的的元素标签
elTags: ['button', 'input', 'textarea', 'i', 'a', 'li'],
// 需要特殊指定是否上报的元素，基于类名，优先级：精确匹配 > 模糊匹配 report > onlyReport > no
elClass: [
{
type: 'report', //基于类名上报的方式，必填吧，report上报，no 不上报， onlyReport，只上报不分析
fuzzyQuery: false, // 是否模糊查询，默认为false,即精确匹配
name: 'j-report-path' // name为class名字
}
]
},
// 请求相关入参
request : {
//axios 实例
axios:'',
// 是否仅仅处理本域下的请求
onlySameOrigin: true,
// 超时时间,0表示不启用
limitTime: 0,
// 需要过滤的请求url,请注意一定要把上报错误的url(全路径)过滤掉，不然会死循环
filterUrls: [],
// 连续求情失败的次数
continuousNums: 3,
// 不连续请求失败的次数
multipleNums: 5,
// 头部需要返回的header数据，可能有他用,key为返回的，value为header字段
headerBack:{ key : value },
},
// 页面相关入参
page : {
// 请求前缀
urlPrefix: '/',
// 不应该刷新的url
refreshLimitUrl: [],
// 页面停留时间,单位s，0表示不启用
pageTimeLimit: 0,
// 跳过页面停留时间报警的url
skipPageStayLimit: [],
// 需要过滤往返次数的url
skipPageForwardBack: [],
// 往返次数
pageForwardBackLimit: 3
},
// 16位秘钥，必填
aesKey : "",
// 同一个错误是否重复上报
reportSameError: false,
// 是否开启debug模式，即不加密
debug : false
}
`javascript${url}_${spendTime}_${limitTime}
{
type : 'click',
data : xxxx //加密过的点击元素
},
{
type : 'page',
data : xxxx, //页面地址，如果是hash路由则为hash地址，如果是histroy路由则为页面路径+hash
extra: {
from: '',
to: ''
} // 手动调用时传入的参数包括但不限于：{ from: from.path, to: to.path, mode: 'history(默认)/hash' }
},
{
type : 'ajax',
data : '',// 加密过的入参
extra:{
ajaxUrl:'',//请求地址
}
},
{
type : 'ajaxResponse',
data : '', // 花费时间
extra:{
ajaxUrl:'',//请求地址
...headers //其他头部返回的信息
}
},
{
type: 'u-001',
data: ,${url}_${pageStayTime}_${pageTimeLimit}
extra: {
ajaxUrl:url,
spendTime: '', // 花费时间
limitTime: '',// 限制时间
headers: {},// 返回的头部信息
}
isReport:true // 本次session内是否上报过相同错误，只有当入参reportSameError为true才有意义
},
{
type:'u-002',
isReport:true,
data:''// 请求地址
},
{
type:'u-003',
isReport:true,
data:''// 请求地址
},
{
type:'u-004',
isReport:true,
data:''// 点击元素
},
{
type:'u-005',
isReport:true,
data:''// 点击元素
},
{
type:'u-006',
isReport:true,
data:,// 页面url
extra:{
pageStayTime:'', // 页面停留时间
pageTimeLimit:'', // 页面限制停留时间
url:''// 页面url
}
},
{
type:'u-007',
isReport:true,
data:''// 来回跳转的页面拼接
},
{
type:'u-008',
isReport:true,
data:''// 页面路径
},
``