track_dove v1.1.4

被监控项目里所需要的配置

import track from 'track_dove'

let optionsObj = {
  needLog: true,  // 控制台要不要看到插件初始化完成的日志
  trackError: false,  // 监控错误
  openErrorRecord: false,  // 开启错误录屏,更有利于捕捉错误
  trackPerformance: true,  // 监控项目性能,开启了之后也会白屏检测会自动调用下边的whiteBoxElements属性
  whiteBoxElements:['html','body','#app'],  // 纯白屏容的时候才会出现的容器盒子.前两个标签是绝对有的,第三个就看自己项目的盒子属性了,一般Vue项目body下边都是<div id="app"></div>
  chain: [
    // 这部分是单个埋点
    // 监听点击事件
    {
      type: 'clickEvent',
      rule: {
        // urls: [],  // 触发的页面地址,非必填,空数组就是所有页面,选填
        selectorId: 'track'  // 必填.标签上的id属性,例如<div id="track"></div>
      },
      // 埋点触发的回调,trackData:返回的埋点数据,send:去对接上报接口方法,可以提前按自己需求过滤数据
      handler: function (trackData, send) {
        send(trackData)
      }
    },
    // 监听页面停留
    {
      type: 'pageStayTime',
      rule: {
        urls: []  // 选填
      },
      handler: function (trackData, send) {
        send(trackData)
      }
    },
    //  监听请求
    {
      type: 'requestTime',
      rule: {
        urls: ['http://localhost:8080/test1']  // 接口请求url,必填
      },
      handler: function (trackData, send) {
        send(trackData)
      }
    },
    // 下边部分是同时埋点多个,链式埋点:clickEvent,requestTime,这两者串联执行
    // chain数组里有很多条链路
    // 链路埋点除了最后一个点上报,在这之前就只做逻辑处理,要想上报就去单次埋点里上报..不要逻辑搞乱了
    {
      status: {
        beginTime: 0,  // 链路开始时间
      },
      pointList: [
        {
          type: 'clickEvent',
          rule: {
            urls: ['http://localhost:9001/#/loginSub'],
            selectorId: 'track'
          },
          handler: function (trackData, send) {
            console.log('链路埋点1')
            this.status.beginTime = trackData.currentTime
          }
        },
        {
          type: 'requestTime',
          rule: {
            urls: ['http://localhost:8080/test2']
          },
          handler: function (trackData, send) {
            console.log('链路埋点2')
            console.log(this.status.beginTime, 'this.status.beginTime--------------')
            // 你有开始时间才会上报你,没有开始时间你就不是从上边的点过来的
            if (this.status.beginTime) {
              trackData.describe = new Date().getTime() - this.status.beginTime // 总时长
              trackData.type = 'clickToRequest_time'
              send(trackData, '点击按钮到保存接口完成')
            }
          }
        }
      ]
    }
  ],
  // 上报
  send: (sendData, remark) => {
    console.log(`最终上报类别:${sendData.type}`, sendData)
    // let data = new URLSearchParams(sendData).toString()
    // new Image().src = `http://localhost:8080/sendData?${data}`
    sendData.entryName = 'pay_center'  // 添加项目名称字段
    sendData.remark = remark
    const fd = new FormData()
    for (let key in sendData) {
      fd.append(key, sendData[key])
    }
    fetch("http://localhost:8080/sendData", { method: 'post', body: fd }).then(function (response) {
      if (response.status >= 400) { throw new Error("Bad response from server") }
      return response.text();
    }).then(function (data) {
      console.log(data)
    }).catch(function (err) {
      console.log(err)
    });
  }
}

// 不同类型的项目初始化的写法不一样:
// Vue
import Vue from 'vue'
Vue.use(track, optionsObj)

// React
track.init(optionsObj)

// 传统多页面项目
<script src="https://unpkg.com/track_dove@1.1.3/index.js"></script>
Track.init(optionsObj)

关于这个插件的文章: https://juejin.cn/post/7229698783646679100#heading-9