React JS错误处理与日志记录问题：ErrorBoundary仅支持React 16版本

兄弟，你说的没错——ErrorBoundary确实是React 16才正式推出的组件级错误捕获特性，要是你的项目还停留在React 15或者更早版本，这个API肯定用不了。下面给你两种靠谱的解决方案，看你需求选：

方案一：升级React到v16及以上版本（推荐） #

这是最省心的方式，毕竟ErrorBoundary是官方主推的组件错误处理方案，升级后你可以直接完善你写了一半的ErrorLimit组件。给你补全并优化后的代码参考：

import React, { Component } from "react";
import "./App.css";
import errorimg from './errorimg.svg';

// 错误边界组件
class ErrorLimit extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  // 捕获子组件抛出的错误
  componentDidCatch(error, errorInfo) {
    // 更新状态以展示错误UI
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
    
    // 这里加入日志记录逻辑，比如上报到后端监控系统
    console.error("组件捕获到错误:", error, errorInfo);
    // 示例：发送错误日志到服务端
    // fetch('/api/log-error', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ 
    //     message: error.message, 
    //     stack: errorInfo.componentStack 
    //   })
    // });
  }

  render() {
    // 如果捕获到错误，展示友好的错误页面
    if (this.state.errorInfo) {
      return (
        <div className="error-page">
          <img src={errorimg} alt="错误提示图标" className="error-img" />
          <h2>哎呀，页面出了点小问题😅</h2>
          <details className="error-details" style={{ whiteSpace: 'pre-wrap' }}>
            <summary>查看错误详情</summary>
            {this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    // 没有错误时，正常渲染子组件
    return this.props.children;
  }
}

// 使用方式：用ErrorLimit包裹可能出错的业务组件
class App extends Component {
  render() {
    return (
      <ErrorLimit>
        {/* 这里放你的业务组件，比如列表、表单等 */}
        <YourBusinessComponent />
      </ErrorLimit>
    );
  }
}

export default App;

升级的好处不止这一点——React 16+引入了Fiber架构，性能提升明显，还有更完善的错误提示、新的生命周期方法等，长期来看绝对值得。

方案二：React 15及以下版本的替代方案 #

如果暂时没法升级React，也能通过以下方式实现错误处理和日志记录：

• 全局错误捕获：在项目入口文件（比如index.js）中添加全局错误监听，捕获所有未被处理的JS错误：

window.onerror = function(message, source, lineno, colno, error) {
  console.error("全局捕获到错误:", message, source, lineno, colno, error);
  // 上报日志到服务端
  // fetch('/api/log-global-error', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({
  //     message,
  //     source,
  //     lineno,
  //     colno,
  //     stack: error?.stack || '无堆栈信息'
  //   })
  // });
  return true; // 阻止浏览器默认的错误提示
};

• 组件内手动try/catch：在可能抛出错误的逻辑（比如生命周期、事件处理、异步请求）里，手动用try/catch包裹：

class DataComponent extends Component {
  state = { data: null, hasError: false };

  componentDidMount() {
    try {
      this.loadData();
    } catch (error) {
      console.error("组件加载出错:", error);
      this.setState({ hasError: true });
      // 上报该组件的错误日志
    }
  }

  loadData = async () => {
    try {
      const response = await fetch('/api/data');
      if (!response.ok) throw new Error(`请求失败: ${response.status}`);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error("数据请求出错:", error);
      this.setState({ hasError: true });
    }
  }

  render() {
    if (this.state.hasError) {
      return <div className="error-tip">数据加载失败，请稍后重试</div>;
    }
    if (!this.state.data) {
      return <div className="loading">加载中...</div>;
    }
    return <div className="data-content">{this.state.data.content}</div>;
  }
}

• 第三方错误监控库：比如Sentry、Bugsnag这类工具，它们支持低版本React，能自动捕获错误、生成详细的错误报告，还能帮你追踪错误出现的场景，省心不少。

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