小林笔记

Appearance

错误监控 ​

前端错误监控是指通过各种手段实时监控前端应用程序中出现的错误，并及时通知开发人员或运维人员以便及时处理。在前端开发中，由于 JavaScript 语言的灵活性和复杂性，代码错误和异常情况非常普遍。这些错误和异常可能导致应用程序的崩溃或功能失效，影响用户体验和业务运营。

分类 ​

  • 监控 JavaScript 异常，如语法错误、运行时错误和未捕获的 Promise 错误等。
  • 监控资源加载异常，如图片加载失败、CSS 文件加载异常、JavaScript 文件加载异常等。
  • 监控接口请求异常，如网络错误、服务器返回错误等。
  • 监控性能问题，如页面加载速度、资源加载速度、JavaScript 执行时间等。
  • 实时监控应用程序状态，如页面崩溃、白屏等异常情况。

监控 JavaScript 异常 ​

  • window.onerror 可以监听全局的错误，如语法错误、运行时错误等。可以通过该事件的参数获取到错误信息、文件名、行号等相关信息。

    js
    window.onerror = function (message, source, lineno, colno, error) {
  console.log('错误信息：', message)
  console.log('错误来源：', source)
  console.log('错误行号：', lineno)
  console.log('错误列号：', colno)
  console.log('错误堆栈：', error && error.stack)
}

  • unhandledrejection 事件可以监听未捕获的 Promise 错误，如未处理的异常情况。

    js
    window.addEventListener('unhandledrejection', function (event) {
  console.log('Promise 错误：', event.reason)
})

注意

try...catch 语句可以捕获错误，但要一个一个设置，重复率极高。对于 Promise 错误其实可以重写全局的 Promise.prototype.catch 方法来处理，但不推荐，副作用太强。

监控资源加载异常 ​

  • error 事件可以监听资源加载错误事件，如图片加载失败、CSS 文件加载异常、JavaScript 文件加载异常等。可以通过该事件的参数获取到错误信息、文件名、行号等相关信息。

    js
    window.addEventListener(
  'error',
  function (event) {
    if (event.target instanceof HTMLImageElement) {
      console.log('图片加载失败：', event.target.src)
    } else if (event.target instanceof HTMLLinkElement) {
      console.log('CSS 文件加载失败：', event.target.href)
    } else if (event.target instanceof HTMLScriptElement) {
      console.log('JavaScript 文件加载失败：', event.target.src)
    }
  },
  true
)

监控接口请求异常 ​

todo...

监控性能问题 ​

todo...

实时监控应用程序状态 ​

todo...