错误捕获方式

主动捕获（try catch) 全局捕获(onerror onunhandledrejection)

主动捕获

  1. // 无法捕捉到异步错误和语法错误 
  2. try {      
  3. } catch(err) {      
  4. }

全局捕获

对于跨域调用的js脚本，onerror事件只会给出很少的报错信息：error: Script error。
onerror事件是无法捕获到网络异常的错误（资源加载失败，裸奔，图片显示异常等）。比如异常监控原理 - 图1 报 404 网络请求异常的时候，onerror 是无法捕获到异常的。
window.addEventListener监听error事件。由于网络请求没有冒泡阶段，所以要在捕获阶段捕捉。
promise异常捕获。通过浏览器自带的unhandledrejection事件来监听全局没有catch的promise执行。

tips:移动端兼容性很差。

监控系统的架构设计

前端监控包括行为监控、异常监控、性能监控等，本文主要讨论异常监控。对于前端而言，和后端处于同一个监控系统中，前端有自己的监控方案，后端也有自己等监控方案，但两者并不分离，因为一个用户在操作应用过程中如果出现异常，有可能是前端引起，也有可能是后端引起，需要有一个机制，将前后端串联起来，使监控本身统一于监控系统。因此，即使只讨论前端异常监控，其实也不能严格区分前后端界限，而要根据实际系统的设计，在最终的报表中体现出监控对开发和业务的帮助。

一般而言，一个监控系统，大致可以分为四个阶段：日志采集、日志存储、统计与分析、报告和警告。

采集阶段

收集异常日志，先在本地做一定的处理，采取一定的方案上报到服务器。

存储阶段

后端接收前端上报的异常日志，经过一定处理，按照一定的存储方案存储。

分析阶段

分为机器自动分析和人工分析。机器自动分析，通过预设的条件和算法，对存储的日志信息进行统计和筛选，发现问题，触发报警。人工分析，通过提供一个可视化的数据面板，让系统用户可以看到具体的日志数据，根据信息，发现异常问题根源。

报警阶段

分为告警和预警。告警按照一定的级别自动报警，通过设定的渠道，按照一定的触发规则进行。预警则在异常发生前，提前预判，给出警告。

参考