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

  • 时间:
  • 浏览:66
  • 来源:必发发发博客 - 专注共享森七博客资源

1.Using XMLHttpRequest:

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

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

未使用catch捕获的promise错误,往往总要占据 比较大的风险。而编码时有不可能 覆盖的占据 问题全面,怎么让有必要监控未补救的promise错误并进行上报。

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

使用window.onerror和window.addEventListener('error')都能捕获,怎么让window.onerror带有完正的error堆栈信息,占据 error.stack中,本来 或多或少人选择使用onerror的方式对js运行时错误进行捕获。

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

作者:黄文佳

关于responseURL 的说明

对于XMLHttpRequest的重写:

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

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

可见 try catch 中的 Console 一段话输出了完正的信息,但 window.onerror 中没办法 捕获“Script error”。根据或多或少特点,还我不要 在 catch 一段话中手动上报捕获的异常。

6.React的componentDidCatch:

不可能

JavaScript代码在用户浏览器中执行时,不可能 或多或少边界情况、本地环境的不可控等因素,不可能 会占据 js运行时错误。

3.JavaScript执行错误:

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

对于有使用框架的项目:一是需用有额外的补救流程,比如示例中就需用单独为vue项目进行初始化;二是对于或多或少框架,都需用单独补救,这名react项目一段话,则需用使用官方提供的componentDidCatch方式来做错误捕获。

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

人太好这并总要有还有一个 JavaScript Bug。出于安全考虑,浏览器会刻意隐藏或多或少域的 JS 文件抛出的具体错误信息,本来做还我不要 有效补救敏感信息无意中被不受控制的第三方脚本捕获。

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

难以在 HTTP 请求响应头中上加跨域属性时,还还我不要 考虑 try catch 或多或少备选方案。

上述的错误捕获基本覆盖了前端监控所需的错误场景,怎么让第三帕累托图指出的有还有一个或多或少问题,目前补救的方式总要太完美。

vue实物占据 的错误会被Vue拦截,怎么让vue提供方式给或多或少人补救vue组件实物占据 的错误。

而对于跨域js捕获的问题:或多或少人我不要 能保证所有的跨域静态资源都上加跨域 HTTP 响应头;而通过第二种邮邮寄国际寄包裹 try-catch的方式进行上报,则需用考虑的场景繁多怎么让无法保证没办法 遗漏。

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

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

需用不怎么注意的是,当请求完正无法执行的本来,XMLHttpRequest会收到status=0 和 statusText=null的返回,此时responseURL也为空string。

而依赖客户端的或多或少方式,不可能 兼容性不可能 网络等问题,总要概率会再次跳出运行时错误。

怎么让,浏览器只允许同域下的脚本捕获具体错误信息,而或多或少脚本只知道占据 了有还有一个错误,但无法获知错误的具体内容。

异步错误的捕获分为有还有一个帕累托图:有还有一个是传统的XMLHttpRequest,本来是使用fetch api。

上加 crossorigin="anonymous" 属性。

像axios和jQuery等库本来在xhr上的封装,而或多或少情况本来可能 会使用原生的fetch,怎么让对这两种情况总要进行捕获。

但这里需用注意,不可能 上端提到了addEventListener也我不要 捕获js错误,怎么让需用过滤补救重复上报,判断为资源错误的本来才进行上报。

实现原理:当promise被reject怎么让错误信息没办法 被补救的本来,会抛出有还有一个unhandledrejection。

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

4.betterjs的script error:

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

人太好占据 这两点占据 问题,但前端错误捕获这帕累托图还是和项目的使用场景密切相关的。或多或少人还我不要 在了解那先 方式本来,选择最适合自己项目的方案,为自己的监控工具服务。

或多或少错误我不要 被window.onerror以及window.addEventListener('error')捕获,怎么让有专门的window.addEventListener('unhandledrejection')方式进行捕获补救。

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

改写fetch方式:

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

5.Vuejs的errorHandler:

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

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

xhr改写

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

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

怎么让或多或少人需用额外的改写xhr的open方式,将传入的url记录下来,方便上报时带上。

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

对于fetch和xhr,或多或少人需用通过改写它们的原生方式,在触发错误时进行自动化的捕获和上报。

上加跨域 HTTP 响应头:

另外在安卓4.4及以下版本的webview中,xhr对象本来占据 responseURL属性。

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

2.script error 产生的原因分析分析和补救方式:

**注意:**大帕累托图主流 CDN 默认上加了 Access-Control-Allow-Origin 属性。

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

不可能 某个节点再次跳出问题原因分析分析某个静态资源无法访问,就需用我不要 捕获或多或少异常并进行上报,方便第一时间补救问题。