前端项目中的Vue、React错误监听怎么实现(react,vue,开发技术)

题目:

如何统一监听 Vue 组件报错？

分析:

真实项目需要闭环，即考虑各个方面，除了基本的功能外，还要考虑性能优化、报错、统计等。 而个人项目、课程项目一般以实现功能为主，不会考虑这么全面。所以，没有实际工作经验的同学，不会了解如此全面。

可以监听当前页面所有的 JS 报错，jQuery 时代经常用。
注意，全局只绑定一次即可。不要放在多次渲染的组件中，这样容易绑定多次。

会监听所有下级组件的错误。可以返回false阻止向上传播，因为可能会有多个上级节点都监听错误。

全局的错误监听，所有组件的报错都会汇总到这里来。PS：如果errorCaptured返回false则不会到这里。

请注意，errorHandler会阻止错误走向window.onerror。

PS：还有warnHandler

组件内的异步错误errorHandler监听不到，还是需要window.onerror

方式

errorCaptured监听下级组件的错误，可返回false阻止向上传播

errorHandler监听 Vue 全局错误

window.onerror监听其他的 JS 错误，如异步

建议：结合使用

一些重要的、复杂的、有运行风险的组件，可使用errorCaptured重点监听

然后用errorHandlerwindow.onerror候补全局监听，避免意外情况

Promise 监听报错要使用window.onunhandledrejection

前端拿到错误监听之后，需要传递给服务端，进行错误收集和分析，然后修复 bug 。 后面会有一道面试题专门讲解。

题目:

如何统一监听 React 组件报错？

分析:

真实项目需要闭环，即考虑各个方面，除了基本的功能外，还要考虑性能优化、报错、统计等。

React 16+ 引入。可以监听所有下级组件报错，同时降级展示 UI 。
代码参考 ErrorBoundary.js 和 components/ErrorDemo

FunctionalDemo.js

建议应用到最顶层，监听全局错误

函数组件中也可以使用

dev 环境下无法看到 ErrorBoundary 的报错 UI 效果。会显示的提示报错信息。
yarn build之后再运行，即可看到 UI 效果。

React 不需要 ErrorBoundary 来捕获事件处理器中的错误。与render方法和生命周期方法不同，事件处理器不会在渲染期间触发。

如果你需要在事件处理器内部捕获错误，使用普通的try-catch语句。也可以使用全局的window.onerror来监听。

ErrorBoundary 无法捕捉到异步报错，可使用window.onerror来监听。

ErrorBoundary 监听渲染时报错

try-catch和window.onerror捕获其他错误

Promise 监听报错要使用window.onunhandledrejection

前端拿到错误监听之后，需要传递给服务端，进行错误收集和分析，然后修复 bug 。