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

news2025/4/26 1:35:48

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

Vue项目统一监听错误

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

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

示例：

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

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

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

示例：

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

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

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

示例：

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

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

示例：

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

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

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

React项目统一监听错误

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

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

示例（同Vue的window.onerror）。

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

示例：

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