前端实现监控埋点

前言

我们在应用开发完成本地测试跑通以后上线，线上可能会出现一些测试没有测出来的问题，那么这个时候我们如何定位到哪里会出现问题呢，因为在测试环境可能浏览器的不同，或是没有做兜底出现了一些线上的问题，我们通过监控的埋点便可以快速的定位到错误位置点。

监控点

错误统计

首先我们项目发布以后遇到一些报错问题，可能是接口问题，也可能是代码兜底的问题等五花八门的错误，可能随便一个错误都会直接影响到用户的使用体验。所以对于线上错误统计就显的尤为重要，能够让我们第一时间去响应错误并处理

行为日志

对于一些我们经常用到的应用 例如 抖音 淘宝 等 当你浏览了一些东西，那么下次打开就会给你推荐相似的东西，这是这些app都存在一套自己的用户行为分析系统，分析用户浏览时间比较页面 按钮点击的行为等，针对用户的行为来进行推荐推送不同的内容

pv/pu

我们上线那么多的前端页面，肯定特别想知道我们的用户对哪个页面的访问次数比较多，也想知道每天有多少的用户访问我们的系统，这就需要用到 PV,UV 的统计

所以我们系统的设计就主要围绕上面着三点进行设计，主要流程如下：

• 数据采集：数据采集做的就是采集我们系统的监控数据，包括 PV,UV 和用户行为及前端报错的数据。
• 日志上报：上报做的就是将第一步采集到的数据发送到服务端。
• 日志查询：这一步就是在后台查询我们采集并上报的数据，方便对系统进行分析。

我们的 SDK 做的主要是对前两部分的实现。

错误监控

前端页面报错是很影响用户体验一件事，即使在测试充分后上线也会因为用户的操作行为以及操作的环境出现各种各样的错误。接下来我们看如何来进行监控这些错误并进行上报

• 语法错误

语法错误一般可在开发阶段就发现，比如单词的拼写错误，符号错误等，且无法被try catch捕获，也一般不会被发布到线上环境

• 同步错误

同步错误指的是在 js 同步执行过程中的错误，比如变量未定义，是可以被 try catch 给捕获到的

try {
  const name = 'name'
  console.log(nam)
} catch (error) {
  console.log('------同步错误-------')
}

• 异步错误

异步错误指的是在 setTimeout 等函数中发生的错误，是无法被 try catch 捕获到的，我们可以使用window.onerror来捕获

 window.onerror = (msg) => {
  }

• promise 错误

在 promise 中使用 catch 可以捕获到异步的错误，但是如果没有写 catch 去捕获错误的话 window.onerror 也捕获不到的，这里我们可以使用unhandledrejection 的监听，用来监听没有被捕获的 promise 错误。

window.addEventListener(
 'unhandledrejection',
 function (error) {
   console.log('捕获到异常：', error)
 },
 true,
)

• 资源加载错误

资源错误值得是文件获取错误，可能是服务器挂掉所造成的，这种情况一般都是比较严重的，需要及时进行处理的，我们可以使用window.addEventListener的error来进行错误的捕获

window.addEventListener(
  'error',
  (error) => {
    console.log(error)
  },
  true,
)

汇总代码

export function errorTrackerReport() {
 // --------  js error ---------
 const originOnError = window.onerror;
 window.onerror = function (msg, url, row, col, error) {
   // 处理原有的onerror
   if (originOnError) {
     originOnError.call(window, msg, url, row, col, error);
   }
   // 错误上报
   lazyReport('error', {
     message: msg,
     file: url,
     row,
     col,
     error,
     errorType: 'jsError'
   });
 }

 // ------  promise error  --------
 window.addEventListener('unhandledrejection', (error) => {
   lazyReport('error', {
     message: error.reason,
     error,
     errorType: 'promiseError'
   });
 });

 // ------- resource error --------
 window.addEventListener('error', (error) => {
   let target = error.target;
   let isElementTarget = target instanceof HTMLScriptElement || target instanceof HTMLLinkElement || target instanceof HTMLImageElement;
   if (!isElementTarget) {
     return; // js error不再处理
   }
   lazyReport('error', {
     message: "加载 " + target.tagName + " 资源错误",
     file: target.src,
     errorType: 'resourceError'
   });
 }, true)
}

用户埋点

埋点的话是监控用户的一些行为数据，比如按钮的点击，页面的浏览时长等数据，根据用户所做的行为进行上报

• 手动埋点

手动埋点就是手动的在代码里面添加相关的埋点代码，比如用户点击某个按钮，就在这个按钮的点击事件中加入相关的埋点代码，或者提交了一个表单，就在这个提交事件中加入埋点代码。

/**
* 手动上报
*/
export function tracker(actionType, data) {
 lazyReport('action', {
   actionType,//类型
   data//上报数据
 });
}
   <button 
     style="marginRight: 20px"
     @click="tracker('click', '按钮1被点击了')"
   >按钮1</button>

• 属性埋点 属性埋点和上方的手动埋点差不多，就是在元素上写一个自定义属性，自动上传自定义属性内的内容

js

 代码解读
复制代码<button data-target="支付按钮" onClick={() => { // 业务代码 }} >手动上报</button>

这两种的优点呢就是可以上传具体的数据可控性比较强，缺点呢就是对代码入侵比较强

• 无痕埋点

无痕埋点是为了解决手动埋点的缺点，实现一种不用侵入业务代码就能在应用中添加埋点监控的埋点方式。

js 代码解读复制代码/**
 * 自动上报
 */
export function autoTrackerReport() {
  // 自动上报
  document.body.addEventListener('click', function (e) {
    const clickedDom = e.target;

    // 获取标签上的data-target属性的值
    let target = clickedDom?.getAttribute('data-target');

    // 获取标签上的data-no属性的值(这里是为了避免重复上报，在需要手动上报的地方设置data-no)
    let no = clickedDom?.getAttribute('data-no');
    // 避免重复上报
    if (no) {
      return;
    }

    if (target) {
      lazyReport('action', {
        actionType: 'click',
        data: target
      });
    } else {
      // 获取被点击元素的dom路径
      const path = getPathTo(clickedDom);
      lazyReport('action', {
        actionType: 'click',
        data: path
      });
    }
  }, false);
}

这个的话可以实现全自动的上报，且不需要太强的代码入侵，但是无法自定义上报数据，且服务器压力比较大，因为只要又点击就会被上报

pv统计

PV 即页面浏览量，用来表示该页面的访问数量。 单页路由区分为 hash 路由和 history 路由，两种路由的原理又不一样，所以统计起来会有点复杂。 我们这里将分别针对两种路由来实现不同的采集数据的方式。

history 路由的实现主要依赖的就是 pushState 和 replaceState 来实现的，但是这两种方法不能被 popstate 监听到，所以需要对这两种方法进行重写来实现数据的采集

/**
 * 重写pushState和replaceState方法
 * @param {*} name
 * @returns
 */
const createHistoryEvent = function (name) {
  // 拿到原来的处理方法
  const origin = window.history[name]
  return function (event) {
    if (name === 'replaceState') {
      const { current } = event
      const pathName = location.pathname
      if (current === pathName) {
        let res = origin.apply(this, arguments)
        return res
      }
    }

    let res = origin.apply(this, arguments)
    let e = new Event(name)
    e.arguments = arguments
    window.dispatchEvent(e)
    return res
  }
}

window.history.pushState = createHistoryEvent('pushState')
window.history.replaceState = createHistoryEvent('replaceState')

function listener() {
  const stayTime = getStayTime() // 停留时间
  const currentPage = window.location.href // 页面路径
  lazyReport('visit', {
    stayTime,
    page: beforePage,
  })
  beforePage = currentPage
}

// history.go()、history.back()、history.forward() 监听
window.addEventListener('popstate', function () {
  listener()
})

// history.pushState
window.addEventListener('pushState', function () {
  listener()
})

// history.replaceState
window.addEventListener('replaceState', function () {
  listener()
})

hash 的改变会出发 hashchange 的监听，所以我们只需要在全局加上一个监听函数，在监听函数中实现采集并上报就可以了。但是在 react 和 vue 中，对于 hash 路由的跳转并不是通过 hashchange 的监听实现的，而是通过 pushState 实现，所以，还需要加上对 pushState 的监听才可以。

export function hashPageTrackerReport() {
  let beforeTime = Date.now() // 进入页面的时间
  let beforePage = '' // 上一个页面

  // 上报
  function listener() {
    const stayTime = getStayTime()
    const currentPage = window.location.href
    lazyReport('visit', {
      stayTime,
      page: beforePage,
    })
    beforePage = currentPage
  }

  // hash路由监听
  window.addEventListener('hashchange', function () {
    listener()
  })
}

uv上报

UV 统计的是一天内访问该网站的用户数，只需要在初始化的时候上报一条消息就可以了

/**
 * 初始化配置
 * @param {*} options
 */
function init(options) {
  ... // 加载配置
  report('user', '加载应用'); // uv统计
}

结尾

现在其实以及存在了比较成熟的监控库供我们使用，例如 sentry fundebug，在开发中还是用的的组件库比较多，这个呢我们只是了解一下这些内部库是如何进行实现的监控