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

  • 时间:
  • 浏览:27
  • 来源:张凯博客 - 专注共享言午博客分享

像axios和jQuery等库可是我 在xhr上的封装,而這個 情況也因为着会使用原生的fetch,否则对这這個 情況有的是进行捕获。

否则,浏览器只允许同域下的脚本捕获具体错误信息,而這個 脚本只知道地处了三个多多多 错误,但无法获知错误的具体内容。

关于responseURL 的说明

否则他们儿才能 额外的改写xhr的open法律土辦法 ,将传入的url记录下来,方便上报时带上。

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

JavaScript代码在用户浏览器中执行时,因为着這個 边界情況、本地环境的不可控等因素,因为着会地处js运行时错误。

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

难以在 HTTP 请求响应头中加在跨域属性时,还才能考虑 try catch 這個 备选方案。

**注意:**大次要主流 CDN 默认加在了 Access-Control-Allow-Origin 属性。

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

而对于跨域js捕获的大现象:他们儿不须能保证所有的跨域静态资源都加在跨域 HTTP 响应头;而通过第二种寄包裹 try-catch的法律土辦法 进行上报,则才能 考虑的场景繁多否则无法保证越来越 遗漏。

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

3.JavaScript执行错误:

对于XMLHttpRequest的重写:

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

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

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

作者:黄文佳

异步错误的捕获分为三个多多多 次要:三个多多多 是传统的XMLHttpRequest,可是我 是使用fetch api。

但这里才能 注意,因为着上边提到了addEventListener也才能捕获js错误,否则才能 过滤外理重复上报,判断为资源错误的可是我 才进行上报。

這個 错误不不被window.onerror以及window.addEventListener('error')捕获,否则有专门的window.addEventListener('unhandledrejection')法律土辦法 进行捕获外理。

加在 crossorigin="anonymous" 属性。

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

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

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

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

才能 有点硬注意的是,当请求删剪无法执行的可是我 ,XMLHttpRequest会收到status=0 和 statusText=null的返回,此时responseURL也为空string。

5.Vuejs的errorHandler:

上述的错误捕获基本覆盖了前端监控所需的错误场景,否则第三次要指出的三个多多多 這個 大现象,目前外理的法律土辦法 有的是太完美。

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

改写fetch法律土辦法 :

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

实现原理:当promise被reject否则错误信息越来越 被外理的可是我 ,会抛出三个多多多 unhandledrejection。

我觉得 地处这两点地处问题,但前端错误捕获这次要还是和项目的使用场景密切相关的。他们儿才能在了解哪些地方地土辦法 律土辦法 可是我 ,选则最适合买车人项目的方案,为买车人的监控工具服务。

2.script error 产生的因为和外理法律土辦法 :

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

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

而依赖客户端的這個 法律土辦法 ,因为着兼容性因为着网络等大现象,有的是概率会突然出显运行时错误。

未使用catch捕获的promise错误,往往后能 地处比较大的风险。而编码时有因为着覆盖的地处问题全面,否则有必要监控未外理的promise错误并进行上报。

vue内部管理地处的错误会被Vue拦截,否则vue提供法律土辦法 给他们儿外理vue组件内部管理地处的错误。

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

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

6.React的componentDidCatch:

1.Using XMLHttpRequest:

xhr改写

因为着某个节点突然出显大现象因为某个静态资源无法访问,就才能 才能捕获這個 异常并进行上报,方便第一时间外理大现象。

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

这里的静态资源包括js、css以及image等。现在的web项目,往往依赖了血块的静态资源,否则一般也会有cdn地处。

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

加在跨域 HTTP 响应头:

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

使用window.onerror和window.addEventListener('error')都能捕获,否则window.onerror蕴含删剪的error堆栈信息,地处error.stack中,很多很多 他们儿选则使用onerror的法律土辦法 对js运行时错误进行捕获。

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

哪些地方地方error事件不不向上冒泡到window,不过能被window.addEventListener在捕获阶段捕获。

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

因为着

另外在安卓4.4及以下版本的webview中,xhr对象可是我 地处responseURL属性。

对于fetch和xhr,他们儿才能 通过改写它们的原生法律土辦法 ,在触发错误时进行自动化的捕获和上报。

4.betterjs的script error:

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