【异常监控】监控 Web 页面的 HTTP 请求异常

1. 什么是HTTP请求异常

HTTP 请求异常指的是 HTTP 请求失败 或者 HTTP 请求返回的状态码非0的情况，主要指的是 AJAX 或者 Fetch API的 HTTP 请求

2. 代码模拟

（1）Ajax 请求报错 但是没有捕获 unhandledrejection

var oButton = document.getElementById('button')
oButton.onclick = function () {
  new Promise((resolve, reject) => {
    console.log(window.a.test)
  })
}

window 上没有 a 所以会报错

window.addEventListener('unhandledrejection', (err) => {
  console.log(err)
})

  自定义上报日志格式 & 数据处理：

window.addEventListener('unhandledrejection', (err) => {
  const { reason, type, timeStamp} = err
  let error = reason.message
  let stack = reason.stack.match(/at\s+.+:(\d+):(\d+)/) // 正则匹配
  let log = {
    type,
    error,
    timeStamp,
    fileName: stack[0],
    position: `${stack[1]}: ${stack[2]}`
  }
  console.log(log)
  // 拿到 log 后进行上报
})

 日志处理之后的格式：

（2）请求报错

var oButton = document.getElementById('button')
    oButton.onclick = function () {
      new Promise((resolve, reject) => {
        setTimeout(() => {
          let errorMessage = {
            status: 500,
            message: 'server error'
          }
          resolve(errorMessage)
        }, 2000)
      }).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
        // {status: 500, message: 'server error'}
        // 对error 进行上报
      })
    }

对于 slardar 、sentry 等监控工具，原理是

对原生的 XMLHttpRequest 对象和 fetch 方法进行重写，从而在代理对象或方法中实现状态码的监听和错误的上报。他们的格式：

{
  type: 'ajax';
  status: string; // 状态码, 例如 '200'
  type: string; // 请求方法， 例如 'POST'
  duration: number; // 请求耗时， 例如 125，单位 ms
  size: number; // 请求返回 body 大小, 例如 243， 单位 byte
  response_header: string; // 响应头
  request_header: string; // 请求头
}