#拦截xhr

复制// 重写 xhr 拦截异常然后上报
const trackerXHR = () => {
  // 拿到 XMLHttpRequest 
  let XMLHttpRequest = window.XMLHttpRequest
  // 保存原有的open方法
  let XMLOriginOpen = XMLHttpRequest.prototype.open
  // 重写 open 方法 目的是为了保存 ethods, url 这个参数的值 用于埋点上报
  // 不能用箭头函数
  // 1. 箭头函数没有 arguments
  // 2. 箭头函数会改变指向 我们需要将 this指向 XMLHttpRequest
  // 3. 箭头函数this绑定的是上一层的this
  XMLHttpRequest.prototype.open = function (methods, url, async) {
    // 将值挂在XMLHttpRequest.logData 中
    this.logData = {
      methods,
      url
    }
    // 执行原有的open方法
    return XMLOriginOpen.apply(this, arguments)
  }
  // 保留原有的send方法
  let XMLOriginSend = XMLHttpRequest.prototype.send
  XMLHttpRequest.prototype.send = function (request) {
    // 重写load、error、abort方法
    // 为什么不修改load、error、abort的原型了呢
    // 因为用户有时候可能不会去调用 load、error、abort 方法，去执行他们的回调
    // 比如 xhr.load、xhr.error、xhr.abort 等等
    // 如果不执行回调 就无法达成上报的目的 但是 send 是一定会执行的
    // 所以放到 send 里 去监听
    const startTime = new Date() // 计算接口的duration, send 时记录请求时刻
    const handle = (eventType) => {
      return () => {
        // 上报 status 不为 0 的错误
        if (
          (eventType === 'load' && this.response.status !== 0) ||
          eventType === 'error' ||
          eventType === 'abort'
        ) {
          const duration = new Date() - startTime
          const log = {
            duration,
            status: this.status,
            statusText: this.statusText,
            url: this.responseURL,
            method: this.logData.methods,
            params: request,
            response: JSON.stringify(this.response || ''),
            type: 'xhr',
            eventType
          }
          // 拿到之后去上报
          console.log(log, 'log----')
        }
      }
    }
    this.addEventListener('load', handle('load'), false)
    this.addEventListener('error', handle('error'), false)
    this.addEventListener('abort', handle('abort'), false)
    return XMLOriginSend.apply(this, arguments)
  }
}
trackerXHR()