wangweianger / zanePerfor

前端性能监控系统,消息队列,高可用,集群等相关架构
Other
1.75k stars 420 forks source link

feat: 新增Vue版本监控PV、UV的SDK #74

Closed yuxuan-ctrl closed 1 year ago

yuxuan-ctrl commented 1 year ago

这个SDK的是基于axios的SDK进行更改的,把原来监听的load事件改成了监听replacestate事件,可以有效的检测Vue项目中router.push,router.replace和load三种事件。主要代码如下: `

function debounce(func, wait) {
  let timer;
  return function () {
    const context = this;
    const args = arguments;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
      timer = null;
    }, wait);
  };
}

function bindEventListener(type) {
  const historyEvent = history[type];
  return function () {
    const newEvent = historyEvent.apply(this, arguments);
    const e = new Event(type);
    e.arguments = arguments;
    window.dispatchEvent(e);
    return newEvent;
  };
}

history.pushState = bindEventListener("pushState");
history.replaceState = bindEventListener("replaceState");

// 通过这里监听push、replace、load事件
window.addEventListener(
  "replaceState",
  debounce(function (e) {
    console.log("replaceState");
    (loadTime = new Date().getTime() - beginTime), getLargeTime();
  }, 1000)
);`

请您过目~ @wangweianger