React15如何捕获错误

在React 15中捕获错误的方法

React 15及更早版本没有内置的错误边界（Error Boundaries）机制，但可以通过以下方式实现错误捕获：

使用try-catch包裹组件渲染

在组件渲染时使用try-catch语句捕获错误：

class ErrorHandler extends React.Component {
  render() {
    try {
      return this.props.children;
    } catch (error) {
      console.error('Caught an error:', error);
      return <div>Something went wrong</div>;
    }
  }
}

// 使用方式
<ErrorHandler>
  <UnstableComponent />
</ErrorHandler>

覆盖React生命周期方法

通过重写React组件的生命周期方法来捕获错误：

const originalRender = React.Component.prototype.render;

React.Component.prototype.render = function() {
  try {
    return originalRender.apply(this, arguments);
  } catch (error) {
    console.error('Component render error:', error);
    return <div>Error occurred</div>;
  }
};

使用高阶组件

创建一个高阶组件来包装其他组件并处理错误：

function withErrorHandling(WrappedComponent) {
  return class extends React.Component {
    render() {
      try {
        return <WrappedComponent {...this.props} />;
      } catch (error) {
        console.error('Error in component:', error);
        return <div>Error occurred</div>;
      }
    }
  };
}

// 使用方式
const SafeComponent = withErrorHandling(UnstableComponent);

全局错误处理

设置window.onerror来捕获未处理的JavaScript错误：

window.onerror = function(message, source, lineno, colno, error) {
  console.error('Global error:', error);
  // 可以在这里显示错误UI
  return true; // 阻止默认错误处理
};

注意事项

这些方法只能捕获渲染过程中的同步错误，无法捕获以下情况：

• 事件处理器中的错误
• 异步代码中的错误（如setTimeout、Promise）
• 服务端渲染错误
• 错误边界自身抛出的错误

对于更全面的错误处理，建议升级到React 16+并使用内置的错误边界功能。