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

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

Vue项目统一监听错误

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

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

示例：

c 复制代码

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

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

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

示例：

c 复制代码

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

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

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

示例：

c 复制代码

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

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

示例：

c 复制代码

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

结合使用建议：

关键组件使用errorCaptured精准捕获，全局用errorHandler兜底。

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

React项目统一监听错误

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

实现：

c 复制代码

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')
);

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

示例（同Vue的window.onerror）。

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

示例：

c 复制代码

javascript
 
function 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设计及日志分析，形成完整闭环

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