re-track

基于vue全局监听操作事件、router监听页面切换

Install

npm install web-vitals re-tracker --save

使用

import RETRACKSDK from 're-track'

const reTrack = new RETRACKSDK({
    config: {
      appRouter: router,
      requestUrl: 'http://localhost:3000'
    },
    onPageShow() {}
})

reTrack.flushQueue()

config

| 参数 | 类型 | 可选值 | 默认值 | 说明 | ---------- | ------- | ------- | -------- |--------------------------------------------------- | appRouter | Object | — | | 系统router（必传） | systemCode | String | — | '' | 应用标识
| uuid | String | — | '' | 用户标识
| requestUrl | String | — | '' | 埋点请求后端接口地址 | extra | Object | — | '' | 用户自定义上传字段对象(仅存在config中的值) | isAssignFilters | Boolean | — | false | 是否将传入的过滤值与默认值进行合并 | isUnAssignFilters | Boolean | — | false | 是否不将传入的过滤值与默认值进行合并且不使用自定义的filters | filters | Object | { localName: ['section', 'h2', 'i', ....], className: ['app-main', 'app-container', 'cell', 'el-form', 'el-row', 'el-table__header-wrapper', 'pagination-container', ....], ....... } | {} | 监听过滤上报的dom内容
| isAssignReportkeys | Boolean | — | false | 是否合并上报监听的dom内容key | unAssignReportkeys | Boolean | — | false | 是否不合并上报监听的dom内容key且不使用自定义的reportkeys | reportkeys | Array | ['baseURI', 'localName', 'outerText', 'outerHTML', ........] | [] | 上报监听的dom内容key | isAssignMouseEventList | Boolean | — | false | 是否合并可监听触发元素事件 | unAssignMouseEventList | Boolean | — | false | 是否不合并可监听触发元素事件且不使用自定义的mouseEventList | mouseEventList | Array | ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover'] | ['click'] | 可监听触发元素事件 | enableLoadePageTracker | Boolean | — | false | 是否开启页面加载性能上报 | enableJoinTracker | Boolean | — | true | 是否开启进入页面自动上报 | enableLeaveTracker | Boolean | — | true | 是否开启离开页面自动上报 | enableLeaveTimeRule | Boolean | — | true | 是否开启离开页面判断页面停留时间进行上报 | leaveRuleTime | Number | — | 0 | 页面停留时间阀值小于则不上报（需开启页面停留校验） | routerExtra | Object | — | {} | 自定义页面路由变化上报内容字段需在路由钩子中存在的key(不设置则使用router中原数据) | intervalTime | Number | — | 6000 | 自动上报时间间隔

options

| 自定义执行函数参数方法名 | 类型 | 可选值 | 默认值 | 说明 | ---------- | ------- | ------- | -------- |--------------------------------------------------- | listenPageDomClick | Function | — | undefined | 监听页面元素操作事件 | listenPage | Function | — | undefined | 监听页面变化 | jsError | Function | — | undefined | 捕获js错误 | promiseReject | Function | — | undefined | 捕获promise错误 | listenNetwork | Function | — | undefined | 网络状态上报 | onPageShow | Function | — | undefined | 未自定义监听页面变化在页面切换进入时执行的自定义事件 | onPagesHide | Function | — | undefined | 未自定义监听页面变化在页面切换退出时执行的自定义事件

methods

| 方法名 | 参数 | 说明 | ---------- | -------- |--------------------------------------------------- | setConfig | config | 设置 config | flushQueue | — | 刷新上报任务队列 | intervalQueue | number(毫秒单位) | 自动上报定时 | report | data | 自定义数据上报并添加任务至上报队列中 | actionReport | data | 用户行为上报 | networkReport | data | 网络状况上报 | performanceReport | data | 页面性能指标上报 | errorReport | data | 错误警告上报 | pageJoin | data | 页面进入上报 | pageLeave | data | 页面离开上报