前端异常监控是指在能够对前端项目运行过程中的错误和异常能够记录和上报从而可以对项目不断分析和优化的流程。从流程上来分，前端异常监控分为数据捕获和数据上报两个部分。

数据捕获

前端异常数据捕获为全局捕获和单点捕获。全局捕获代码集中，易于管理；单点捕获作为补充，对某些特殊情况进行捕获，但较分散，不利于管理。

全局捕获

• 通过 web API 全局的接口，将捕获代码集中写在一个地方
  • window.onerror 可以捕获 JavaScript 运行时错误与语法错误
  • window.addEventListener('unhandledrejection') 可以捕获 未被 catch 的 reject 状态的 Promise(Promise 异常)
  • document.addEventListener('click') 全局的点击事件
• 框架级别的全局监听
  • aixos 中使用 interceptor 进行拦截
  • vue 中的 errorCaptured、errorHandler
  • react 中的 ErrorBoundary
• 通过对全局函数进行封装包裹，实现在调用该函数时自动捕获异常
  • 例如对 xhr/Fetch 进行封装，在发送 Ajax 请求时进行记录
• 对实例方法重写（Patch），在原有功能基础上包裹一层
  • 例如对 setTimeout、setInterval、requrestAnimationFrame、console 进行重写，在使用方法不变的情况下也可以异常捕获

单点捕获

• 在业务代码中对单个代码块进行包裹，或在逻辑流程中打点，实现有针对性的异常捕获
• try catch 语句块记录 JS Error 异常
• 专门写一个函数来收集异常信息，在异常发生时，调用该函数
• 专门写一个函数来包裹其他函数，得到一个新函数，该新函数运行结果和原函数一模一样，只是在发生异常时可以捕获异常

数据上报

异常数据上报，即通过一定方式将收集到的参数上报到服务器的过程。

• 异步请求，通过 xhr/fetch 上报
• new Image() 上报（1x1的透明gif）

sentry

Sentry 是一款开源的错误捕获和性能监控系统。类似的商业化（非开源）前端错误与性能监控平台还有 Fundebug、FrontJS、rollbar.js 等。