一篇文章教你如何捕获前端错误
因此我们需要额外的改写xhr的open方法,将传入的url记录下来,方便上报时带上。
其他问题1、其他框架,例如vue项目的错误捕获vue内部发生的错误会被Vue拦截,因此vue提供方法给我们处理vue组件内部发生的错误。
2、script error的解决方式"script error.”有时也被称为跨域错误。当网站请求并执行一个托管在第三方域名下的脚本时,就可能遇到该错误。最常见的情形是使用 CDN 托管 JS 资源。 其实这并不是一个 JavaScript Bug。出于安全考虑,浏览器会刻意隐藏其他域的 JS 文件抛出的具体错误信息,这样做可以有效避免敏感信息无意中被不受控制的第三方脚本捕获。 因此,浏览器只允许同域下的脚本捕获具体错误信息,而其他脚本只知道发生了一个错误,但无法获知错误的具体内容。 解决方案1:(推荐)添加 crossorigin="anonymous" 属性。
此步骤的作用是告知浏览器以匿名方式获取目标脚本。这意味着请求脚本时不会向服务端发送潜在的用户身份信息(例如 Cookies、HTTP 证书等)。 添加跨域 HTTP 响应头:
或者
注意:大部分主流 CDN 默认添加了 Access-Control-Allow-Origin 属性。 完成上述两步之后,即可通过 window.onerror 捕获跨域脚本的报错信息。 解决方案2难以在 HTTP 请求响应头中添加跨域属性时,还可以考虑 try catch 这个备选方案。 在如下示例 HTML 页面中加入 try catch:
可见 try catch 中的 Console 语句输出了完整的信息,但 window.onerror 中只能捕获“Script error”。根据这个特点,可以在 catch 语句中手动上报捕获的异常。 总结上述的错误捕获基本覆盖了前端监控所需的错误场景,但是第三部分指出的两个其他问题,目前解决的方式都不太完美。 (编辑:帝国网站管理系统) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |