常见错误的分类
对于用户在访问页面时发生的错误,主要包括以下几个类型:
1、js运行时错误
JavaScript代码在用户浏览器中执行时,由于一些边界情况、本地环境的不可控等因素,可能会存在js运行时错误。
而依赖客户端的某些方法,由于兼容性或者网络等问题,也有概率会出现运行时错误。
e.g: 下图是当使用了未定义的变量"foo",导致产生js运行时错误时的上报数据:
2、资源加载错误
这里的静态资源包括js、css以及image等。现在的web项目,往往依赖了大量的静态资源,而且一般也会有cdn存在。
如果某个节点出现问题导致某个静态资源无法访问,就需要能够捕获这种异常并进行上报,方便第一时间解决问题。
e.g: 下图是图片资源不存在时的上报数据:
3、未处理的promise错误
未使用catch捕获的promise错误,往往都会存在比较大的风险。而编码时有可能覆盖的不够全面,因此有必要监控未处理的promise错误并进行上报。
e.g: 下图是promise请求接口发生错误后,未进行catch时的上报数据:
4、异步请求错误(fetch与xhr)
异步错误的捕获分为两个部分:一个是传统的XMLHttpRequest,另一个是使用fetch api。
像axios和jQuery等库就是在xhr上的封装,而有些情况也可能会使用原生的fetch,因此对这两种情况都要进行捕获。
e.g: 下图是xhr请求接口返回400时捕获后的上报数据:
各个类型错误的捕获方式
1、window.onerror与window.addEventListener('error')捕获js运行时错误
使用window.onerror和window.addEventListener('error')都能捕获,但是window.onerror含有详细的error堆栈信息,存在error.stack中,所以我们选择使用onerror的方式对js运行时错误进行捕获。
window.onerror = function (msg, url, lineNo, columnNo, error) { // 处理错误信息}// demomsg: Uncaught TypeError: Uncaught ReferenceError: a is not definederror.statck: TypeError: ReferenceError: a is not defined at http://xxxx.js:1:13window.addEventListener('error', event => (){ // 处理错误信息}, false);// true代表在捕获阶段调用,false代表在冒泡阶段捕获。使用true或false都可以,默认为false
2、资源加载错误使用addEventListener去监听error事件捕获
实现原理:当一项资源(如或
此步骤的作用是告知浏览器以匿名方式获取目标脚本。这意味着请求脚本时不会向服务端发送潜在的用户身份信息(例如 Cookies、HTTP 证书等)。
添加跨域 HTTP 响应头:
Access-Control-Allow-Origin: *
或者
Access-Control-Allow-Origin: http://test.com
**注意:**大部分主流 CDN 默认添加了 Access-Control-Allow-Origin 属性。
完成上述两步之后,即可通过 window.onerror 捕获跨域脚本的报错信息。
解决方案2
难以在 HTTP 请求响应头中添加跨域属性时,还可以考虑 try catch 这个备选方案。
在如下示例 HTML 页面中加入 try catch:
Test page in http://test.com // app.js里面有一个foo方法,调用了不存在的bar方法 // 运行输出结果如下:=> ReferenceError: bar is not definedat foo (http://another-domain.com/app.js:2:3)at http://test.com/:15:3=> "Script error.