vue3中全局错误捕获上报？其实很简单！

种太阳的小菇凉
2,144 阅读4分钟

背景

前两家公司都是使用sentry进行前端的错误捕获并上报，在sentry上也可以看见错误的出现路径，但是新公司前端项目没有什么基础建设，只接入了神策埋点系统。 我在神策上也没有找到合适的自动化错误上报方法，因此决定自己研究一下错误上报。

思路

一、前端错误分成几种
  1. JS脚本错误: 如‘xx is undefined’，也就是在开发过程中因为自己的代码错误导致程序崩溃并且在控制台有error提示的错误。
  2. 资源加载错误：引入了不存在的资源，常见的就是‘图片不存在’。
  3. 接口侧错误：跨域、500、404等常见的http请求错误。
二、为什么要进行前端错误捕获上报
  1. 快速定位线上问题：不知道大家有没有遇到过，用户说页面崩溃了，但是你无法复现的情况。这时候如果可以知道用户报的错误位置就会更方便排查问题。当我们知道用户页面出现问题的时间以及页面，我们便可以在上报平台找到对应的错误上报。
  2. 了解边界情况，优化代码：接1中的情况，一般多发生在没有测试到的边界情况，一旦发现这种问题，可以立刻修改自己的代码，兼容边界条件，尽量做到线上稳定。
  3. 总结1.2 得到，做了这种处理，可以做到快速定位问题并甩锅（不是）
三、针对不同类型的错误如何进行捕获

  1. JS脚本错误：你可能会看到如下对于【如何捕获JS脚本错误？】的答案

    使用window.onerror事件：在全局作用域下定义一个函数，并将其赋值给window.onerror属性。当页面中的JavaScript出现错误时，该函数就会被调用

    但是，实际上在它会有以下弊端

    1.  无法捕获所有类型的错误：window.onerror只能捕获到同源下的JavaScript运行时错误，对于跨域资源加载错误和其他非JavaScript的错误无能为力。
2.  没有具体错误信息：window.onerror只能获取到错误的简单信息，如错误类型、错误文件路径等，缺少详细的错误堆栈信息，难以快速定位问题。
3。不稳定性：某些浏览器在window.onerror中抛出异常会导致onerror无法正常工作，从而无法捕获错误。
4。 不支持异步代码：window.onerror只能捕获同步代码中的错误，对于异步代码和回调函数中的错误无法捕获。

    此刻，需要注意我们的标题重点【vue3】，实际上在vue3中有一种更好的办法来捕获错误，并且这种办法可以不存在上述window.onerror的全部弊端

    指路：cn.vuejs.org/api/applica…

  2. 接口错误捕获：除了trycatch，还需要想到要针对不同的http错误status来进行单独的上报

  3. 资源上报错误：这里主要针对图片加载失败，通过window监听img的error事件来捕获错误

具体实现

  1. 定义全局的errorhandler方法，main.ts中代码（注意：先定义方法再挂载）

    image.png

  2. 对于js脚本的错误，errorHandler方法会自动捕获。

  3. 但是对于资源加载失败的情况需要多出以下步骤（我这里只处理了img的情况）

    （1）因为要全局监听img的onerror事件，我们可以通过自定义vue指令的方式捕获 image.png （2）在img标签中通过v-img的方式就可以进行错误捕获

  4. 接口错误捕获，在接口的相应拦截器中对请求的状态进行判断

    image.png 这里需要注意一个点：接口跨域的时候，status是undefined，我这里把娶不到status的情况都定义成CORS（可能有问题。。。）

总结

  1. 这种全局错误捕获，个人认为有条件的最好接入一些自动化上报平台：sentry等，但是这样的自定义捕获然后上报也是可以的。
  2. 以上仅代表我自己对这方面的理解，在下才疏学浅，对这篇文章有任何问题都可以指教一二。
avatar
文章
阅读
粉丝