Vue和React项目中，统一监听页面错误需要结合框架提供的错误处理机制与JavaScript原生方法

在Vue和React项目中，统一监听页面错误需要结合框架提供的错误处理机制与JavaScript原生方法，以下是具体方案及实现原理：

Vue项目统一监听错误

1. errorCaptured生命周期钩子134
   作用：监听所有下级组件的报错，可返回false阻止错误向上传播。

使用场景：针对关键组件（如核心业务模块）单独监听。

示例：

javascript 
export default {errorCaptured(error, instance, info) {console.log('捕获到组件错误:', error, info);// return false 阻止继续传播}
}

2. 全局错误处理器errorHandler1310
   作用：通过Vue实例配置全局错误监听，汇总所有未阻止传播的组件错误。

限制：无法捕获异步错误（如setTimeout中的报错）。

示例：

javascript 
const app = createApp(App);
app.config.errorHandler = (error, instance, info) => {console.log('全局错误:', error, info);// 上报错误到服务端
};

3. window.onerror监听原生JS错误138
   作用：捕获所有JavaScript运行时错误（包括异步错误）。

注意：需在入口文件或根组件中绑定一次，避免重复注册。

示例：

javascript 
window.onerror = (msg, source, line, column, error) => {console.log('JS运行时错误:', { msg, source, line, error });return true; // 阻止默认控制台报错
};

4. 处理Promise未捕获错误14
   方法：通过window.onunhandledrejection监听未处理的Promise拒绝。

示例：

javascript 
window.addEventListener('unhandledrejection', (event) => {console.log('未处理的Promise错误:', event.reason);event.preventDefault(); // 阻止默认报错
});

结合使用建议：
关键组件使用errorCaptured精准捕获，全局用errorHandler兜底。

异步错误和资源加载错误通过window.onerror补充监听310。

React项目统一监听错误

1. Error Boundary（错误边界）246
   作用：通过类组件捕获子组件树中的渲染错误，展示降级UI。

实现：

javascript 
class ErrorBoundary extends React.Component {state = { hasError: false };static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {console.log('组件渲染错误:', error, errorInfo);// 上报错误}render() {return this.state.hasError ? <FallbackUI /> : this.props.children;}
}// 在根组件包裹
ReactDOM.render(<ErrorBoundary><App /></ErrorBoundary>,document.getElementById('root')
);

2. window.onerror监听全局错误248
   作用：捕获异步错误、事件处理函数中的错误等Error Boundary无法覆盖的场景。

示例（同Vue的window.onerror）。

3. 事件处理器与异步代码的try-catch68
   场景：Error Boundary无法捕获事件处理函数中的错误，需手动捕获。

示例：

javascriptfunction Button() {const handleClick = () => {try {// 可能出错的代码} catch (error) {console.log('事件错误:', error);}};return <button onClick={handleClick}>点击</button>;
}

结合使用建议：
根组件使用Error Boundary处理渲染错误。

事件处理器和异步代码结合try-catch与window.onerror68。

通用方案与注意事项
错误上报：所有捕获的错误需通过HTTP请求上报至服务端（如Sentry、自建监控系统）16。

开发环境差异：

React的Error Boundary在开发模式下可能直接显示错误堆栈，需生产构建后测试降级UI28。

Vue的errorHandler在开发模式下默认输出详细错误信息1。

性能影响：避免在错误处理中执行复杂逻辑，防止阻塞主线程。

总结

框架	组件级错误	全局错误	异步/事件错误
Vue	errorCaptured	errorHandler	window.onerror
React	Error Boundary	window.onerror	try-catch + window.onerror

通过组合框架特性与原生API，可实现全链路错误监控。实际项目中还需结合错误分类、降级UI设计及日志分析，形成完整闭环

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！