前端异常分类、捕获、监控

1.异常分类，大致可以分为以下三类

　运行时异常：如使用接口未返回的数据、数组下标取值不存在的情况

　静态资源加载异常：如图片、css等文件加载错误

　异步请求错误：promise请求接口未做catch处理

 

2.异常捕获

　运行时异常捕获：window.onerror = function(message,source,line,colno,error) {} ,只要是js运行错误都会触发onerror

　静态资源加载异常捕获：这类异常不能通过window.onerror捕获到，但是可以通过window.addEventListener("error",(e)=>{},false)捕获，需要强调的是第三个参数为true时也可以捕获运行时错误，第三个参数false表示事件冒泡模式（默认），true表示事件捕获模式

　异步请求错误：一般的promise请求都会写catch体，如果忘写了可以通过window.addEventListener("onhandledrejecte",(e)=> {})捕获所有的异步请求异常

 

3.异常监控

　通过以上分类，当捕获到异常时，调用异常上报接口实现异常监控。需要注意的是不同的异常对象信息并不一致，需要分析具体的异常信息上报给接口。

 

4.其它异常补充

　a. Vue项目异常监控：在mian.js中通过Vue.config.errorHandler捕获，可以拿到具体的this信息，基本能覆盖大多数场景。

　b. Iframe现在基本上很少使用所以没有在上述分类中，如果有使用iframe如果同域直接加上onerr即可，不同域则使用postMessage传递。

 

5.异常上报方式

　a.通过ajax发送数据：对上报接口有跨域限制

　b.通过动态创建Image标签方式，通过请求一张1px*1px的gif图后面拼接上报数据的方式：通过图片的src属性请求，避免了跨域问题，更通用