React 错误边界中的错误分类：一份综合指南

错误处理是构建健壮且可维护的 React 应用程序的关键环节。虽然 React 的错误边界（Error Boundaries）提供了一种优雅地处理渲染期间发生的错误的机制，但理解如何对不同类型的错误进行分类和响应，对于创建一个真正具有弹性的应用程序至关重要。本指南将探讨在错误边界内进行错误分类的各种方法，并提供实际示例和可行的见解，以改进您的错误管理策略。

什么是 React 错误边界？

React 16 中引入的错误边界（Error Boundaries）是一种 React 组件，它可以捕获其子组件树中任何位置的 JavaScript 错误，记录这些错误，并显示一个备用 UI，而不是让整个组件树崩溃。它的功能类似于 try...catch 代码块，但专为组件设计。

错误边界的主要特点：

• 组件级错误处理： 将错误隔离在特定的组件子树中。
• 优雅降级： 防止单个组件的错误导致整个应用程序崩溃。
• 可控的备用 UI： 在发生错误时显示用户友好的消息或替代内容。
• 错误日志记录： 通过记录错误信息来方便错误跟踪和调试。

为什么要在错误边界中对错误进行分类？

仅仅捕获错误是不够的。有效的错误处理需要理解究竟出了什么问题并做出相应的响应。在错误边界内对错误进行分类有以下几个好处：

• 针对性错误处理： 不同类型的错误可能需要不同的响应。例如，网络错误可能需要重试机制，而数据验证错误可能需要用户修正输入。
• 改善用户体验： 根据错误类型显示信息更丰富的错误消息。一个通用的“出错了”消息远不如一个指出网络问题或无效输入的具体消息有用。
• 增强调试能力： 对错误进行分类为调试和确定问题根源提供了宝贵的上下文信息。
• 主动监控： 跟踪不同错误类型的发生频率，以识别重复出现的问题并优先修复。
• 策略性备用 UI： 根据错误显示不同的备用 UI，为用户提供更相关的信息或操作。

错误分类的方法

在 React 错误边界中，可以采用多种技术对错误进行分类：

1. 使用 instanceof

instanceof 运算符用于检查一个对象是否是特定类的实例。这对于根据内置或自定义的错误类型对错误进行分类非常有用。

示例：

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // 更新 state，以便下一次渲染可以显示备用 UI。
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // 你也可以将错误记录到错误报告服务中
    console.error("捕获到错误:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // 你可以渲染任何自定义的备用 UI
      let errorMessage = "出错了。";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "发生网络错误。请检查您的网络连接并重试。";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "存在验证错误。请检查您的输入。";
      }

      return (
        <div>
          <h2>错误！</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

解释：

• 定义了自定义的 NetworkError 和 ValidationError 类，它们继承自内置的 Error 类。
• 在 MyErrorBoundary 组件的 render 方法中，使用 instanceof 运算符来检查捕获到的错误类型。
• 根据错误类型，在备用 UI 中显示特定的错误消息。

2. 使用错误代码或属性

另一种方法是在错误对象本身中包含错误代码或属性。这允许根据特定的错误场景进行更细粒度的分类。

示例：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("网络请求失败");
          error.code = response.status; // 添加自定义错误代码
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // 更新 state，以便下一次渲染可以显示备用 UI。
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // 你也可以将错误记录到错误报告服务中
    console.error("捕获到错误:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "出错了。";
      if (this.state.error.code === 404) {
        errorMessage = "资源未找到。";
      } else if (this.state.error.code >= 500) {
        errorMessage = "服务器错误。请稍后重试。";
      }

      return (
        <div>
          <h2>错误！</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

解释：

• fetchData 函数向错误对象添加了一个 code 属性，代表 HTTP 状态码。
• MyErrorBoundary 组件检查 code 属性以确定具体的错误场景。
• 根据错误代码显示不同的错误消息。

3. 使用集中式错误映射

对于复杂的应用程序，维护一个集中式的错误映射可以提高代码的组织性和可维护性。这包括创建一个字典或对象，将错误类型或代码映射到特定的错误消息和处理逻辑。

示例：

const errorMap = {
  "NETWORK_ERROR": {
    message: "发生网络错误。请检查您的网络连接。",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "输入无效。请检查您的数据。",
    retry: false,
  },
  404: {
    message: "资源未找到。",
    retry: false,
  },
  500: {
    message: "服务器错误。请稍后重试。",
    retry: true,
  },
  "DEFAULT": {
    message: "出错了。",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // 更新 state，以便下一次渲染可以显示备用 UI。
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // 你也可以将错误记录到错误报告服务中
    console.error("捕获到错误:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>错误！</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

解释：

• errorMap 对象根据错误类型或代码存储错误信息，包括消息和重试标志。
• handleCustomError 函数根据错误消息从 errorMap 中检索错误详情，如果未找到特定代码，则返回默认值。
• MyErrorBoundary 组件使用 handleCustomError 从 errorMap 获取相应的错误消息。

错误分类的最佳实践

• 定义清晰的错误类型： 为您的应用程序建立一套一致的错误类型或代码。
• 提供上下文信息： 在错误对象中包含相关详细信息，以便于调试。
• 集中化错误处理逻辑： 使用集中式错误映射或工具函数来统一管理错误处理。
• 有效记录错误： 与错误报告服务（如 Sentry、Rollbar 和 Bugsnag）集成，以在生产环境中跟踪和分析错误。
• 测试错误处理： 编写单元测试以验证您的错误边界是否能正确处理不同类型的错误。
• 考虑用户体验： 显示信息丰富且用户友好的错误消息，引导用户解决问题。避免使用技术术语。
• 监控错误率： 跟踪不同错误类型的发生频率，以识别重复出现的问题并优先修复。
• 国际化 (i18n)： 向用户呈现错误消息时，请确保消息已正确国际化以支持不同的语言和文化。使用像 i18next 或 React 的 Context API 这样的库来管理翻译。
• 可访问性 (a11y)： 确保您的错误消息对残障用户是可访问的。使用 ARIA 属性为屏幕阅读器提供额外的上下文。
• 安全性： 谨慎处理在错误消息中显示的信息，尤其是在生产环境中。避免暴露可能被攻击者利用的敏感数据。例如，不要向最终用户显示原始的堆栈跟踪信息。

示例场景：在电子商务应用中处理 API 错误

假设一个电子商务应用需要从 API 检索产品信息。潜在的错误场景包括：

• 网络错误： API 服务器不可用或用户的互联网连接中断。
• 认证错误： 用户的认证令牌无效或已过期。
• 资源未找到错误： 请求的产品不存在。
• 服务器错误： API 服务器遇到内部错误。

通过使用错误边界和错误分类，应用程序可以优雅地处理这些场景：

// 示例 (简化版)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // 使用前面展示的 errorMap
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("捕获到错误:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>错误！</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>重试</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

解释：

• fetchProduct 函数检查 API 响应的状态码，并根据状态抛出特定的错误类型。
• ProductErrorBoundary 组件捕获这些错误并显示相应的错误消息。
• 对于网络错误和服务器错误，会显示一个“重试”按钮，允许用户再次尝试请求。
• 对于认证错误，用户可能会被重定向到登录页面。
• 对于资源未找到错误，会显示一条消息，指出产品不存在。

结论

在 React 错误边界内对错误进行分类对于构建具有弹性、用户友好的应用程序至关重要。通过采用像 instanceof 检查、错误代码和集中式错误映射等技术，您可以有效地处理不同的错误场景并提供更好的用户体验。请记住遵循错误处理、日志记录和测试的最佳实践，以确保您的应用程序能够优雅地处理意外情况。

通过实施这些策略，您可以显著提高 React 应用程序的稳定性和可维护性，为您的用户（无论其身在何处或背景如何）提供更流畅、更可靠的体验。

更多资源：

• React 错误边界官方文档
• Sentry 的 React 16 错误边界指南
• Robin Wieruch 的 React 错误边界教程