vue的事件监听,vue中监听事件
本文主要介绍前端项目中的Vue和React错误监控。文章重点介绍了题目的相关信息，并介绍了所需的伙伴以供参考。
目录
I. Vue错误监控窗口. onerrorerrorCaptured生命周期错误处理程序异步错误答案扩展II。反应错误监控错误边界开发和建立事件报告错误异步错误应答扩展
一、 Vue 错误监听
题目：
如何统一监控Vue组件上报的错误？
分析：
真实项目需要闭环，就是考虑方方面面，除了基本功能，性能优化，报错，统计等。但是个别项目和课程项目一般以实现功能为主，不会考虑的那么全面。所以没有实际工作经验的同学不会有这么全面的认识。
window.onerror
您可以在当前页面上监控所有JS错误，这在jQuery时代经常使用。
请注意，全局绑定只能进行一次。不要放在多次渲染的组件里，这样很容易多次绑定。
window.onerror=function(消息，源，行，列，错误){
console.log(window.onerror -，消息，源，行，列，错误)
}
//注意如果用window.addEventListener (error ，event={})参数就不一样了！
errorCaptured 生命周期
将监听所有下级组件错误。您可以返回false来防止向上传播，因为可能有多个上级节点在侦听错误。
错误捕获(错误，实例，信息){
console.log(errorCaptured -，错误，实例，信息)
}
errorHandler
全局错误监控，所有组件的错误将在此汇总。PS:不会如果errorCaptured返回false。
const app=createApp(App)
app.config.errorHandler=(错误，实例，信息)={
console.log(errorHandler -，错误，实例，信息)
}
请注意，errorHandler将阻止错误进入window.onerror
PS：和警告处理程序
异步错误
无法听到组件中的异步错误errorHandler，或者需要window.onerror。
已安装(){
setTimeout(()={
抛出新错误(“setTimeout错误”)
}, 1000)
},
答案
方法
ErrorCaptured监视从属组件的错误，并且可以返回false以防止向上传播。errorHandler监视Vue全局错误。On Error监控其他JS错误，比如异步建议：组合使用。
对于一些重要的、复杂的和有风险的组件，可以使用errorCaptured作为关键监视器，然后使用errorHandlerwindow.onerror作为备用全局监视器，以避免出现意外情况。
扩展
当Promise侦听错误时，使用window.onunhandledrejection。
得到前端错误监控后，需要传递给服务器进行错误收集和分析，然后进行bug修复。后面会有一个面试问题。
二、React 错误监听
题目：
如何监控React组件的错误？
分析：
真实项目需要闭环，就是考虑方方面面，除了基本功能，性能优化，报错，统计等。
ErrorBoundary
React 16介绍。您可以监控所有下级组件的错误，并降低用户界面。
请参见代码ErrorBoundary.js和components/ErrorDemo。
从“react”导入React
类错误边界扩展反应。组件{
施工员(道具){
超级(道具)
this.state={
错误：null //存储当前错误信息。
}
}
静态getDerivedStateFromError(错误){
//更新状态，以便下一次呈现可以显示降级的UI
console . info( getderivedstatefromrerror . ，错误)
返回{错误}
}
componentDidCatch(错误，错误信息){
//统计上报的错误信息。
console . info( componentDidCatch . ，错误，错误信息)
}
render() {
if (this.state.error) {
//提示错误
返回h1报告了一个错误/h1
}
//如果没有错误，则呈现子组件。
归还这个。道具。孩子们
}
}
导出默认误差边界
功能演示. js
从“react”导入{ useState，useEffect }
函数错误演示(){
const [num]=useState(100)
函数clickHandler() {
Num() //ErrorBoundary无法监听事件，需要自己尝试-catch。
}
useEffect(()={
//ThrowNewError( Mounted Error )//Error boundary可以侦听呈现过程中的错误。
}, [])
退货部门
perror演示-功能/p
button onClick={ clickHandler }错误/button
/div
}
导出默认错误演示
建议应用到顶层来监听全局错误。
//index.js条目文件
ReactDOM.render(
做出反应。严格模式
误差边界
App /
/错误边界
/反应过来。严格模式，
document.getElementById(root )
);
也可以用在函数组件中。
功能应用(道具){
返回误差边界
{道具.儿童}
/错误边界
}
dev 和 build
在开发环境中看不到ErrorBoundary的错误UI效果。将显示一条错误消息。Yarn构建然后运行，可以看到UI效果。
事件报错
React不需要ErrorBoundary来捕捉事件处理程序中的错误。与render方法和lifecycle方法不同，事件处理程序在呈现期间不会被触发。
如果需要捕捉事件处理程序内部的错误，请使用普通的try-catch语句。也可以使用全局window.onerror来监听。
异步错误
ErrorBoundary无法捕获异步错误，可以使用window.onerror进行监控。
window.onerror=function(消息，源，行，列，错误){
console.log(window.onerror -，消息，源，行，列，错误)
}
//注意如果用window.addEventListener (error ，event={})参数就不一样了！
答案
错误边界在侦听渲染时报告了错误。try-catch和window.onerror捕获了其他错误
扩展
当Promise侦听错误时，使用window.onunhandledrejection。
得到前端错误监控后，需要传递给服务器进行错误收集和分析，然后进行bug修复。
关于前端项目中的Vue和React错误监控的这篇文章到此结束。有关Vue和React错误监控的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。