zf-front-abtrack

基于前端的异常用户行为分析

基本介绍

基于前端的用户异常行为分析，将用户可能存在的困扰更及时准确的反馈给我们

调用示例

正常引入

import UserPath from 'zf-front-abtrack'
new UserPath({
  aesKey: '1234567890abcabc',
  request: {
    // axios实例
    axios: axios
  }
}).then((res) => {
  console.log(res)
})

手动调用,主要使用在页面跳转以及一些主动触发的点击事件上

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 | 页面刷新或则跳转或则关闭 | - |

入参说明

  {
      // 操作相关入参
      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
  }

出参说明

      {
            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}_${spendTime}_${limitTime}`,
            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}_${pageStayTime}_${pageTimeLimit}`,// 页面url
            extra:{
                  pageStayTime:'', // 页面停留时间
                  pageTimeLimit:'', // 页面限制停留时间
                  url:''// 页面url
            }

      },
      {
            type:'u-007',
            isReport:true,
            data:''// 来回跳转的页面拼接
      },
      {
            type:'u-008',
            isReport:true,
            data:''// 页面路径
      },