3.8错误处理与边界

3.8错误处理与边界

React错误处理与边界：构建健壮的应用

在React应用开发中，错误处理是至关重要的一环。一个健壮的应用不仅要能够正常运行，还应该能够优雅地处理各种意外情况，避免崩溃并提供友好的用户体验。React提供了一系列的机制来帮助我们实现这一目标，包括错误边界（Error Boundaries）、try/catch语句、以及对Promise rejection的处理。

1. 错误边界 (Error Boundaries)

1.1 什么是错误边界？

错误边界是React组件，可以捕获其子组件树中发生的JavaScript错误，记录这些错误，并显示备用UI，而不是使整个组件树崩溃。错误边界在生产环境中充当“安全网”，防止整个应用因单个组件的错误而瘫痪。

重要特性：

• 仅捕获渲染期间发生的错误： 错误边界只能捕获在其子组件的渲染过程中、生命周期方法中以及构造函数中发生的错误。它们无法捕获事件处理程序中的错误，异步代码（例如setTimeout或Promise）中的错误，以及错误边界自身抛出的错误。

• 类组件： 错误边界必须是类组件，因为它们需要使用生命周期方法来捕获错误。

• 静态方法 getDerivedStateFromError() 和 componentDidCatch(): 错误边界通过定义这两个静态方法来工作。

1.2 如何创建错误边界？

以下是一个简单的错误边界组件的示例：

import React from 'react';
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    console.error("Captured error:", error, errorInfo);
    //logErrorToMyService(error, errorInfo); // 假设的错误上报函数
  }
  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 渲染
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo && this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    return this.props.children;
  }
}
export default ErrorBoundary;
​

代码详解：

• constructor(props): 初始化state，hasError 初始值为 false。

• static getDerivedStateFromError(error): 这是一个静态方法，当子组件抛出错误时会被调用。它接收 error 对象作为参数，并返回一个新的 state 对象，用于更新组件的状态。在这里，我们将 hasError 设置为 true，以便在下一次渲染时显示备用 UI。

• componentDidCatch(error, errorInfo): 这是一个生命周期方法，当子组件抛出错误时会被调用。它接收两个参数：error (错误对象) 和 errorInfo (包含有关错误发生位置的组件堆栈信息的对象)。 我们可以在这个方法中记录错误信息，或者将其发送到错误跟踪服务。

• render(): 根据 hasError 的值，渲染不同的 UI。如果 hasError 为 true，则渲染备用 UI；否则，渲染子组件。

1.3 如何使用错误边界？

只需将需要保护的组件包裹在 <ErrorBoundary> 组件中即可：

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';
function App() {
  return (
    <div>
      <h1>My App</h1>
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
      <ErrorBoundary>
        <AnotherComponent />
      </ErrorBoundary>
    </div>
  );
}
export default App;
​

如果 MyComponent 或 AnotherComponent 在渲染过程中抛出错误，ErrorBoundary 将捕获该错误并显示备用 UI，而不会影响整个应用程序的运行。 每个 ErrorBoundary 实例都只能保护其直接子组件。

1.4 错误边界的局限性

• 无法捕获事件处理程序中的错误: 错误边界无法捕获事件处理程序中的错误。 对于事件处理程序中的错误，你需要使用 try/catch 语句。

• 无法捕获异步代码中的错误: 错误边界无法捕获 setTimeout、Promise 等异步代码中的错误。 你需要使用 try/catch 语句或 Promise.catch() 来处理这些错误。

• 无法捕获错误边界自身抛出的错误: 错误边界无法捕获自身抛出的错误。 如果错误边界自身出现问题，应用程序可能会崩溃。

1.5 错误边界的层级

你可以根据需要嵌套错误边界。 例如，你可以在根级别放置一个错误边界来捕获所有未处理的错误，然后在更细粒度的级别放置其他错误边界来处理特定组件的错误。

1.6 使用场景

• 保护关键组件: 将关键组件（例如导航栏、主要内容区域）包裹在错误边界中，以确保即使这些组件发生错误，应用程序的核心功能仍然可用。

• 处理第三方组件错误: 如果你使用第三方组件，并且不确定它们的稳定性，可以将它们包裹在错误边界中，以防止它们引发的错误影响整个应用程序。

• 提供友好的错误提示: 在错误边界中，你可以自定义错误提示信息，向用户提供更友好的体验，而不是显示默认的错误页面。

1.7 图解错误边界

2. Try/Catch 语句

2.1 简介

try/catch 语句是一种标准的 JavaScript 错误处理机制。 你可以使用 try/catch 语句来捕获同步代码块中发生的错误。

2.2 使用方法

function MyComponent() {
  try {
    // 可能会抛出错误的代码
    const result = someFunctionThatMightThrow();
    return <div>{result}</div>;
  } catch (error) {
    // 处理错误
    console.error("An error occurred:", error);
    return <div>An error occurred. Please try again later.</div>;
  }
}
​

代码详解：

• try 块包含可能抛出错误的代码。

• catch 块包含用于处理错误的代码。 当 try 块中的代码抛出错误时，程序会立即跳转到 catch 块。 catch 块接收一个参数，该参数包含有关错误的信息。

2.3 适用场景

• 事件处理程序: 在事件处理程序中使用 try/catch 语句来捕获错误，防止错误导致组件卸载或应用程序崩溃。

• 同步代码块: 在任何可能抛出错误的同步代码块中使用 try/catch 语句。

2.4 与错误边界的比较

• 错误边界: 捕获渲染期间、生命周期方法中和构造函数中发生的错误。

• Try/Catch: 捕获同步代码块中发生的错误，例如事件处理程序。

3. 处理 Promise Rejection

3.1 简介

当 Promise 变为 rejected 状态时，表示异步操作失败。 如果没有处理 Promise 的 rejection，可能会导致未处理的 promise rejection 错误，这可能会导致应用程序出现问题。

3.2 处理方法

• .catch() 方法: 可以使用 .catch() 方法来处理 Promise 的 rejection。

fetchData()
  .then(data => {
    // 处理数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error("Failed to fetch data:", error);
  });
​

• async/await 语法: 可以使用 try/catch 语句来处理 async/await 语法中的 Promise rejection。

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Failed to fetch data:", error);
    throw error; // 重新抛出错误，以便上层组件可以处理
  }
}
function MyComponent() {
  useEffect(() => {
    fetchData().catch(error => {
      // 处理错误
      console.log("Error caught in component:", error);
    });
  }, []);
  return (
    <div>
      {/* ... */}
    </div>
  );
}
​

代码详解：

• 在 async 函数中使用 try/catch 语句来捕获 await 表达式可能抛出的错误。

• 在 catch 块中，可以处理错误，或者重新抛出错误，以便上层组件可以处理。

3.3 全局 Promise Rejection 处理

可以使用 window.addEventListener('unhandledrejection', ...) 来监听全局的未处理的 Promise Rejection。

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled promise rejection:', event.reason);
  // 可以将错误上报给服务器
  // logErrorToMyService(event.reason);
  event.preventDefault(); // 阻止默认的错误处理行为
});
​

注意: 虽然可以全局监听未处理的 rejection，但最佳实践仍然是在每个 Promise 上都显式地处理 rejection。

4. 总结

错误处理是React应用开发中不可或缺的一部分。通过合理地使用错误边界、try/catch 语句和 Promise rejection 处理机制，可以构建更健壮、更可靠的应用程序，并提供更好的用户体验。

• 错误边界: 用于捕获组件树中发生的渲染错误，提供备用UI。

• try/catch 语句: 用于捕获同步代码块中发生的错误，例如事件处理程序。

• Promise rejection 处理: 用于处理异步操作失败的情况。

请记住，错误处理是一个持续的过程。 随着应用程序的增长和复杂性增加，需要不断地审查和改进错误处理策略。