React 15.6.2异常处理与错误日志问题求助

Got it, let's tackle this problem since React 15.6.2 doesn't support Error Boundaries and plain try…catch can't catch child component errors. Here are practical solutions you can implement right away:

1. 手动封装高阶组件（HOC）模拟Error Boundary行为 #

Since React 15 lacks the built-in componentDidCatch lifecycle, we can create a Higher-Order Component to wrap your components and catch rendering errors. This works for synchronous errors in the wrapped component's render phase.

const withErrorHandler = (WrappedComponent) => {
  return class ErrorHandler extends React.Component {
    state = { hasError: false, error: null };

    render() {
      if (this.state.hasError) {
        // Replace with your custom fallback UI
        return <div className="error-fallback">Oops, something broke here!</div>;
      }

      try {
        return <WrappedComponent {...this.props} />;
      } catch (error) {
        this.setState({ hasError: true, error });
        // Log error to client or server here
        console.error('Component render error:', error);
        return <div className="error-fallback">Oops, something broke here!</div>;
      }
    }
  };
};

Usage: Wrap any component you want to protect:

const SafeUserProfile = withErrorHandler(UserProfile);

Note: This only catches synchronous errors in the wrapped component's render. For async errors in lifecycle methods, we need additional handling.

2. 全局异常监听覆盖全局及异步错误 #

To catch errors in standalone .js files, async operations (like setTimeout, Promises), and unhandled errors across your app, add global event listeners:

// Catch global synchronous errors
window.addEventListener('error', (event) => {
  console.error('Global synchronous error:', event.error);
  // Send error log to your server here
});

// Catch unhandled Promise rejections
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
  // Send rejection log to your server here
});

This will cover most edge cases that component-level handling misses.

3. 子组件异步操作的手动错误处理 #

For async code in child components (like API calls in componentDidMount, or setState callbacks), wrap the async logic in try…catch or use a reusable utility function to avoid repetition:

// Reusable async error handler
const handleAsync = async (asyncFn, onError) => {
  try {
    await asyncFn();
  } catch (error) {
    onError(error);
    console.error('Async operation error:', error);
  }
};

Usage in child components:

class ChildComponent extends React.Component {
  state = { data: null, error: null };

  componentDidMount() {
    handleAsync(async () => {
      const response = await fetch('/api/user-data');
      const data = await response.json();
      this.setState({ data });
    }, (error) => {
      this.setState({ error });
    });
  }

  render() {
    if (this.state.error) return <div>Failed to load data</div>;
    return <div>User data: {JSON.stringify(this.state.data)}</div>;
  }
}

4. 第三方库辅助（可选） #

If you don't want to write all this from scratch, you can use libraries compatible with React 15 like react-error-catcher. These libraries wrap your components to catch rendering and lifecycle errors, working similarly to the HOC we built above but with extra polish.

内容的提问来源于stack exchange，提问作者MK Vimalan