一篇文章教你如何捕获前端错误

随着前端页面承载功能越来越多,用户本地浏览器环境也错综复杂,因此即使有完善的测试,我们也无法保证上线的代码不会出错。在这种场景下,前端页面的监控就成了各个web项目必备的工具。

一般对页面的监控包含页面性能、页面错误以及用户行为路径获取上报等。

而本文将重点关注其中的错误部分,主要介绍一下常见的错误类型以及如何对它们进行捕获并上报。

常见错误的分类

对于用户在访问页面时发生的错误,主要包括以下几个类型:

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运行时错误进行捕获。

 
 
 
 
  1. window.onerror = function (msg, url, lineNo, columnNo, error) { 
  2.     // 处理错误信息 
  3. // demo 
  4. msg: Uncaught TypeError: Uncaught ReferenceError: a is not defined 
  5. error.statck: TypeError: ReferenceError: a is not defined at http://xxxx.js:1:13 
  6. window.addEventListener('error', event => (){  
  7.   // 处理错误信息 
  8. }, false); 
  9. // true代表在捕获阶段调用,false代表在冒泡阶段捕获。使用true或false都可以,默认为false 

2、资源加载错误使用addEventListener去监听error事件捕获

实现原理:当一项资源(如 

此步骤的作用是告知浏览器以匿名方式获取目标脚本。这意味着请求脚本时不会向服务端发送潜在的用户身份信息(例如 Cookies、HTTP 证书等)。

添加跨域 HTTP 响应头:

 
 
 
 
  1. Access-Control-Allow-Origin: * 

或者

 
 
 
 
  1. Access-Control-Allow-Origin: http://test.com 

注意:大部分主流 CDN 默认添加了 Access-Control-Allow-Origin 属性。

完成上述两步之后,即可通过 window.onerror 捕获跨域脚本的报错信息。

解决方案2

难以在 HTTP 请求响应头中添加跨域属性时,还可以考虑 try catch 这个备选方案。

在如下示例 HTML 页面中加入 try catch:

 
 
 
 
  1.  
  2.  
  3.  
  4.     Test page in http://test.com 
  5.  
  6.  
  7.      
  8.     // app.js里面有一个foo方法,调用了不存在的bar方法 
  9.      
  10.  
  11.  
  12.  
  13. // 运行输出结果如下: 
  14.  
  15. => ReferenceError: bar is not defined 
  16. at foo (http://another-domain.com/app.js:2:3) 
  17. at http://test.com/:15:3 
  18. => "Script error.", "", 0, 0, undefined 

可见 try catch 中的 Console 语句输出了完整的信息,但 window.onerror 中只能捕获“Script error”。根据这个特点,可以在 catch 语句中手动上报捕获的异常。

总结

上述的错误捕获基本覆盖了前端监控所需的错误场景,但是第三部分指出的两个其他问题,目前解决的方式都不太***。

对于有使用框架的项目:一是需要有额外的处理流程,比如示例中就需要单独为vue项目进行初始化;二是对于其他框架,都需要单独处理,例如react项目的话,则需要使用官方提供的componentDidCatch方法来做错误捕获。

而对于跨域js捕获的问题:我们并不能保证所有的跨域静态资源都添加跨域 HTTP 响应头;而通过第二种包裹try-catch的方式进行上报,则需要考虑的场景繁多并且无法保证没有遗漏。

虽然存在这两点不足,但前端错误捕获这部分还是和项目的使用场景密切相关的。我们可以在了解这些方式以后,选择最适合自己项目的方案,为自己的监控工具服务。

当前名称:一篇文章教你如何捕获前端错误
网站URL:http://www.csdahua.cn/qtweb/news48/417098.html

网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网