自研前端监控系统总结(SDK篇)-接口监控

sanstu

已于 2022-11-12 19:01:27 修改

阅读量218

点赞数

文章标签： javascript 前端

于 2022-10-31 18:36:23 首次发布

本文链接：https://blog.csdn.net/sanstu/article/details/127503658

版权

对我司自研的前端监控系统的前端SDK进行总结

所有的请求第三方库都是基于xhr、fetch二次封装的，所以只需要重写这两个事件就可以拿到所有的接口请求的信息，通过判断status的值来判断当前接口是否是正常的。举个栗子，重写xhr的代码操作。

private xhrReplace () {
    if (!window.XMLHttpRequest) return
    const xmlhttp = window.XMLHttpRequest
    const _oldSend = xmlhttp.prototype.send
    const _oldSetRequestHeader = xmlhttp.prototype.setRequestHeader
    let startTime = 0
    const _handleEvent = (event: any) => {
      if (event && event.currentTarget) {
        const currentTarget = event.currentTarget
        const log: any = {
          code: 0,
          path: currentTarget.responseURL,
          time: Date.now(),
          duration: Date.now() - startTime
        }
        if (currentTarget.status !== 200) {
          // 自定义错误上报
          log.code = -1
          log.page = wind