加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 移动互联 > 正文

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

发布时间:2019-07-16 10:59:11 所属栏目:移动互联 来源:黄文佳
导读:跟着前端页面承载成果越来越多,用户当地赏识器情形也错综伟大,因此纵然有完美的测试,我们也无法担保上线的代码不会堕落。在这种场景下,前端页面的监控就成了各个web项目必备的器材。 一样平常对页面的监控包括页面机能、页面错误以及用户举动路径获取上报

因此我们必要特另外改写xhr的open要领,将传入的url记录下来,利便上报时带上。

  1. var _oldOpen = xmlhttp.prototype.open; 
  2. // 重写open要领,记录哀求的url 
  3. xmlhttp.prototype.open = function (method, url) { 
  4.     _oldOpen.apply(this, arguments); 
  5.     this.ajaxUrl = url; 
  6. }; 

其他题目

1、其他框架,譬喻vue项目标错误捕捉

vue内部产生的错误会被Vue拦截,因此vue提供要领给我们处理赏罚vue组件内部产生的错误。

  1. Vue.config.errorHandler = function (err, vm, info) {  // handle error  // `info` 是 Vue 特定的错误信息,好比错误地址的生命周期钩子  // 只在 2.2.0+ 可用} 

2、script error的办理方法

"script error.”偶然也被称为跨域错误。当网站哀求并执行一个托管在第三方域名下的剧本时,就也许碰着该错误。最常见的气象是行使 CDN 托管 JS 资源。

其拭魅这并不是一个 JavaScript Bug。出于安详思量,赏识器会决心潜匿其他域的 JS 文件抛出的详细错误信息,这样做可以有用停止敏感信息有时中被不受节制的第三方剧本捕捉。

因此,赏识器只应承同域下的剧本捕捉详细错误信息,而其他剧本只知道产生了一个错误,但无法获知错误的详细内容。

办理方案1:(保举)

添加 crossorigin="anonymous" 属性。

  1. <script src="http://another-domain.com/app.js" crossorigin="anonymous"></script> 

此步调的浸染是奉告赏识器以匿名方法获取方针剧本。这意味着哀求剧本时不会向处事端发送隐藏的用户身份信息(譬喻 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. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>Test page in http://test.com</title> 
  5. </head> 
  6. <body> 
  7.     <script src="http://another-domain.com/app.js"></script> 
  8.     // app.js内里有一个foo要领,挪用了不存在的bar要领 
  9.     <script> 
  10.     window.onerror = function (message, url, line, column, error) { 
  11.         console.log(message, url, line, column, error); 
  12.     } 
  13.     try { 
  14.         foo(); 
  15.     } catch (e) { 
  16.         console.log(e); 
  17.  
  18.         throw e; 
  19.     } 
  20. </script> 
  21. </body> 
  22. </html> 
  23.  
  24. // 运行输出功效如下: 
  25.  
  26. => ReferenceError: bar is not defined 
  27. at foo (http://another-domain.com/app.js:2:3) 
  28. at http://test.com/:15:3 
  29. => "Script error.", "", 0, 0, undefined 

可见 try catch 中的 Console 语句输出了完备的信息,但 window.onerror 中只能捕捉“Script error”。按照这个特点,可以在 catch 语句中手动上报捕捉的非常。

总结

上述的错误捕捉根基包围了前端监控所需的错误场景,可是第三部门指出的两个其他题目,今朝办理的方法都不太美满。

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读