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

  • 时间:
  • 浏览:98
  • 来源:千域资源网 - 专注共享琳战博客活动

改写fetch法律辦法 :

使用window.onerror和window.addEventListener('error')都能捕获,或者window.onerror饱含删剪的error堆栈信息,位于error.stack中,许多大家选则使用onerror的法律辦法 对js运行时错误进行捕获。

**注意:**大偏离 主流 CDN 默认打上去了 Access-Control-Allow-Origin 属性。

更多内容敬请关注 vivo 互联网技术 微信公众号

但这里须要注意,机会上方提到了addEventListener也都都上能捕获js错误,或者须要过滤处理重复上报,判断为资源错误的之后才进行上报。

e.g: 下图是图片资源不位于时的上报数据:

另外在安卓4.4及以下版本的webview中,xhr对象许多位于responseURL属性。

对于fetch和xhr,大家须要通过改写它们的原生法律辦法 ,在触发错误时进行自动化的捕获和上报。

异步错误的捕获分为有八个 偏离 :有八个 是传统的XMLHttpRequest,原本是使用fetch api。

5.Vuejs的errorHandler:

难以在 HTTP 请求响应头中打上去跨域属性时,还都都上能 考虑 try catch 一种生活 备选方案。

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/E51lKQOojsvhHvACIyXwhw

作者:黄文佳

哪此error事件我不要 向上冒泡到window,不过能被window.addEventListener在捕获阶段捕获。

https://cn.vuejs.org/v2/api/index.html#errorHandler

此步骤的作用是告知浏览器以匿名法律辦法 获取目标脚本。这原因请求脚本时我不要 向服务端发送潜在的用户身份信息(类式 Cookies、HTTP 证书等)。

xhr改写

觉得位于这两点缺乏,但前端错误捕获这偏离 还是和项目的使用场景密切相关的。大家都都上能 在了解哪此法律辦法 之后,选则最适合我本人项目的方案,为我本人的监控工具服务。

https://github.com/BetterJS/badjs-report/issues/3

实现原理:当一项资源(如<img>或<script>)加载失败,加载资源的元素会触发有八个 Event接口的error事件,并执行该元素上的onerror()处理函数。

机会

e.g: 下图是promise请求接口位于错误后,未进行catch时的上报数据:

而依赖客户端的许多法律辦法 ,机会兼容性机会网络等哪此的问题,都是概率会再次出现运行时错误。

2.script error 产生的原因和处理法律辦法 :

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

这里的静态资源包括js、css以及image等。现在的web项目,往往依赖了极少量的静态资源,或者一般也会有cdn位于。

e.g: 下图是当使用了未定义的变量"foo",原因产生js运行时错误时的上报数据:

https://docs.fundebug.com/notifier/javascript/type/javascript.html

可见 try catch 中的 Console 句子输出了删剪的信息,但 window.onerror 中都都上能了捕获“Script error”。根据一种生活 特点,都都上能 在 catch 句子中手动上报捕获的异常。

打上去 crossorigin="anonymous" 属性。

打上去跨域 HTTP 响应头:

或者,浏览器只允许同域下的脚本捕获具体错误信息,而许多脚本只知道位于了有八个 错误,但无法获知错误的具体内容。

对于XMLHttpRequest的重写:

而对于跨域js捕获的哪此的问题:大家并都都上能了保证所有的跨域静态资源都打上去跨域 HTTP 响应头;而通过第二种包裹邮寄单try-catch的法律辦法 进行上报,则须要考虑的场景繁多或者无法保证没办法 遗漏。

或者大家须要额外的改写xhr的open法律辦法 ,将传入的url记录下来,方便上报时带上。

1.Using XMLHttpRequest:

4.betterjs的script error:

—— —— 参考文档 —— ——

3.JavaScript执行错误:

e.g: 下图是xhr请求接口返回400时捕获后的上报数据:

须要一阵一阵注意的是,当请求删剪无法执行的之后,XMLHttpRequest会收到status=0 和 statusText=null的返回,此时responseURL也为空string。

上述的错误捕获基本覆盖了前端监控所需的错误场景,或者第三偏离 指出的有八个 许多哪此的问题,目前处理的法律辦法 都是太完美。

"script error.”有时也被称为跨域错误。当网站请求并执行有八个 托管在第三方域名下的脚本时,就机会遇到该错误。最常见的清况 是使用 CDN 托管 JS 资源。

6.React的componentDidCatch:

实现原理:当promise被reject或者错误信息没办法 被处理的之后,会抛出有八个 unhandledrejection。

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

注:转载文章请先与微信号:labs2020 联系。

vue内部人员位于的错误会被Vue拦截,或者vue提供法律辦法 给大家处理vue组件内部人员位于的错误。

一种生活 错误我不要 被window.onerror以及window.addEventListener('error')捕获,或者有专门的window.addEventListener('unhandledrejection')法律辦法 进行捕获处理。

觉得这并都是有八个 JavaScript Bug。出于安全考虑,浏览器会刻意隐藏许多域的 JS 文件抛出的具体错误信息,原本做都都上能 有效处理敏感信息无意中被不受控制的第三方脚本捕获。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

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

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

https://www.alibabacloud.com/help/zh/faq-detail/88579.htm

未使用catch捕获的promise错误,往往一定会位于比较大的风险。而编码时有机会覆盖的缺乏全面,或者有必要监控未处理的promise错误并进行上报。

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

JavaScript代码在用户浏览器中执行时,机会许多边界清况 、本地环境的不可控等因素,机会会位于js运行时错误。

像axios和jQuery等库许多在xhr上的封装,而许多清况 也机会会使用原生的fetch,或者对你是什么种生活生活清况 都是进行捕获。

机会某个节点再次出现哪此的问题原因某个静态资源无法访问,就须要都都上能捕获一种生活 异常并进行上报,方便第一时间处理哪此的问题。

关于responseURL 的说明