在 React 项目中，错误处理是保障应用健壮性和用户体验的重要环节。以下是 React 错误处理的常见方法及深度实践：

1. 错误边界（Error Boundaries）

核心用途：捕获子组件树中的渲染错误，防止整个应用崩溃。
实现方式：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 上报错误到监控系统（如 Sentry）
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI />; // 显示备用 UI
    }
    return this.props.children;
  }
}

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

注意事项：

• 错误边界无法捕获以下错误：
• 事件处理器（如 onClick）
• 异步代码（如 setTimeout、fetch）
• 服务端渲染
• 错误边界自身抛出的错误

2. 事件处理器和异步代码的错误处理

事件处理器中的错误

使用 try/catch 捕获同步错误：

const handleClick = () => {
  try {
    // 可能出错的逻辑
  } catch (error) {
    setErrorState(error.message);
  }
};

异步操作（如 API 请求）

在 useEffect 或异步函数中处理：

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await axios.get('/api/data');
    } catch (error) {
      // 处理错误，更新状态或上报
      setError(error.message);
    }
  };
  fetchData();
}, []);

3. 全局错误监控

前端监控集成：

• 使用 Sentry、Bugsnag 等工具实时捕获生产环境错误。
• 监听全局未捕获错误：

// 全局错误
window.addEventListener('error', (event) => {
  logToService(event.error);
});

// 未捕获的 Promise 异常
window.addEventListener('unhandledrejection', (event) => {
  logToService(event.reason);
});

4. 状态管理中的错误处理

Redux/Mobx 场景：

• 在 Redux 中间件（如 redux-thunk）中统一处理异步错误：

const fetchData = () => async (dispatch) => {
  try {
    const data = await api.getData();
    dispatch({ type: 'SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'ERROR', payload: error.message });
  }
};

5. 深度实践技巧

分层错误边界

• 路由级错误边界：为每个路由模块包裹错误边界，防止单页面崩溃影响全局。
• 组件级错误边界：针对关键组件（如表单、数据看板）单独处理错误。

用户友好提示

• 根据错误类型展示不同 UI：
• 网络错误 → 提示检查网络并重试。
• 权限错误 → 引导用户登录。
• 关键错误 → 展示全屏错误页。

错误恢复机制

• 提供 重试按钮（如数据加载失败后重新请求）。
• 在错误边界中通过 resetKeys 重置状态（React 18+ 支持）。

错误上报与调试

• 记录错误上下文信息（如用户操作路径、设备信息）。
• 开发环境下使用 console.error 输出详细堆栈。

TypeScript 类型保护

通过类型检查减少运行时错误：

interface UserData {
  id: string;
  name: string;
}

const renderUser = (user: UserData) => {
  if (!user) return <ErrorView />; // 类型保护
  return <div>{user.name}</div>;
};

6. 测试阶段的错误处理

• 单元测试：使用 Jest 模拟错误场景，验证错误边界是否触发。
• E2E 测试：通过 Cypress 模拟网络错误，检查 UI 反馈是否符合预期。

深度错误处理需要结合以下策略：

1. 防御性编码：预判可能的错误场景（如 API 失败、空数据）。
2. 分层捕获：错误边界 + 全局监控覆盖不同层级的错误。
3. 用户体验优化：清晰的错误提示和恢复机制。
4. 自动化监控：集成 Sentry 等工具实时追踪生产环境问题。
5. 团队规范：制定错误处理标准和代码审查流程。

通过系统化的错误处理，可以显著提升 React 应用的稳定性和用户信任度。