前端性能监控、异常监控的一些记录

文章目录

    • 常见异常类型
    • 常用的一些异常监控的方法
      • window.error
      • window.addEventListener('error')
      • window.addEventListener('load')
      • window.addEventListener('DOMContentLoaded')
      • window.performance
      • navigator.sendBeacon
      • 1*1像素gif
      • axios 请求/响应拦截器
      • Vue的errorHandler
      • React的ErrorBoundary
      • try...catch
      • Sentry

在前端开发中,异常监控是一个重要的环节,它可以帮助开发者及时发现和修复应用中的问题,提升用户体验。

常见异常类型

  • 请求异常: 请求异常通常发生在客户端与服务器进行数据交互时,比如网络问题、服务器错误、API请求异常、资源请求异常等
  • JS异常: JS异常是指在JavaScript代码执行过程中出现的异常,这可能包括语法错误、运行时错误、类型错误等。
  • 环境异常 : 环境异常是指由于客户端环境的不同(如不同的浏览器、设备、操作系统)导致的异常,这可能包括兼容性问题、性能问题、小程序、容器等。
  • 业务异常 : 业务异常是指在执行特定业务逻辑时出现的错误,这可能包括用户输入错误、数据处理错误、业务流程错误等等。

常用的一些异常监控的方法

window.error

window.error 用于捕获和处理JavaScript运行时错误,提供更详细的错误堆栈信息,例如脚本执行报错,
但需要注意的是,它可能无法捕获所有类型的资源加载错误,比如某些跨域资源的错误。

window.onerror = function(message, source, lineno, colno, error) {
  // 构建错误信息对象
  const errorInfo = {
    message: message, // 错误消息
    source: source, // 错误发生的URL
    lineno: lineno, // 出错的行号
    colno: colno, // 列号
    error: error // 错误对象
  };

  // 上报错误信息到服务器或错误监控系统
  reportError(errorInfo);
};

window.addEventListener(‘error’)

window.addEventListener(‘error’)也可以用来捕获错误,但它只能捕获资源加载错误,例如

你可能感兴趣的:(其他!,前端,异常监控,性能监控)