React 开发中如何统一管理和响应错误信息

在 React 开发中，处理错误信息是一个重要的任务。在实际项目中，错误信息可能会来自于网络请求、组件渲染、用户输入等等。如果没有一个良好的错误处理机制，会给开发带来很大的困扰。本文将介绍如何在 React 开发中统一管理和响应错误信息，以及如何优化错误信息的提示和处理。

统一管理错误信息

在实际开发中，我们可能需要处理多个组件的错误信息。为了方便管理，我们可以将错误信息集中存储在一个错误管理器中。错误管理器可以是一个单例对象，也可以是一个 React 组件。下面是一个简单的错误管理器实现：

class ErrorManager {
  static instance = null;

  static getInstance() {
    if (!ErrorManager.instance) {
      ErrorManager.instance = new ErrorManager();
    }
    return ErrorManager.instance;
  }

  errors = [];

  addError(error) {
    this.errors.push(error);
  }

  clearErrors() {
    this.errors = [];
  }

  getErrors() {
    return this.errors;
  }
}

function useErrorManager() {
  const errorManager = ErrorManager.getInstance();
  return {
    addError: errorManager.addError.bind(errorManager),
    clearErrors: errorManager.clearErrors.bind(errorManager),
    getErrors: errorManager.getErrors.bind(errorManager),
  };
}

上面的代码定义了一个 ErrorManager 类，它是一个单例对象。我们可以通过 getInstance 方法获取 ErrorManager 的实例。addError 方法用于添加错误信息，clearErrors 方法用于清空所有错误信息，getErrors 方法用于获取所有错误信息。

useErrorManager 是一个 React Hook，用于在函数组件中使用 ErrorManager。它返回一个对象，包含 addError、clearErrors 和 getErrors 三个方法。下面是一个使用示例：

function MyComponent() {
  const { addError, clearErrors, getErrors } = useErrorManager();

  function handleButtonClick() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // do something with data
      })
      .catch(error => {
        addError(error);
      });
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Fetch Data</button>
      <ul>
        {getErrors().map((error, index) => (
          <li key={index}>{error.message}</li>
        ))}
      </ul>
    </div>
  );
}

上面的代码定义了一个 MyComponent 组件，它使用了 useErrorManager Hook。在 handleButtonClick 方法中，我们发起了一个网络请求，并在 catch 分支中调用了 addError 方法。在组件的渲染过程中，我们可以通过 getErrors 方法获取所有错误信息，并将它们渲染为一个列表。

响应错误信息

在实际开发中，我们需要根据不同的错误类型，采取不同的响应方式。例如，网络请求失败时，我们可能需要重新发起请求或者提示用户重试；用户输入错误时，我们可能需要给出相应的提示信息。下面是一个基于 ErrorManager 的错误响应机制的实现：

function useErrorManager() {
  const errorManager = ErrorManager.getInstance();
  const [lastErrors, setLastErrors] = useState(null);

  useEffect(() => {
    setLastErrors(errorManager.getErrors());
    errorManager.clearErrors();
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLastErrors(null);
    }, 5000);
    return () => clearTimeout(timer);
  }, [lastErrors]);

  function handleRetry() {
    errorManager.clearErrors();
    // retry logic here
  }

  return {
    errors: lastErrors,
    handleRetry,
  };
}

function MyComponent() {
  const { errors, handleRetry } = useErrorManager();

  return (
    <div>
      {errors && (
        <div>
          <ul>
            {errors.map((error, index) => (
              <li key={index}>{error.message}</li>
            ))}
          </ul>
          <button onClick={handleRetry}>Retry</button>
        </div>
      )}
    </div>
  );
}

上面的代码定义了一个新的 useErrorManager Hook。它在组件挂载时获取所有错误信息，并在 lastErrors 状态中保存。同时，它还设置了一个定时器，在 5 秒后将 lastErrors 状态清空。handleRetry 方法用于重新发起请求（或者进行其他处理）。在 MyComponent 中，我们根据 lastErrors 状态渲染错误信息和重试按钮。

优化错误信息提示和处理

在实际项目中，我们可能需要进一步优化错误信息的提示和处理。例如，我们可以根据错误类型显示不同的提示信息；或者在错误发生时弹出一个对话框，让用户选择是否重试。下面是一个示例代码：

function useErrorManager() {
  const errorManager = ErrorManager.getInstance();
  const [lastErrors, setLastErrors] = useState(null);
  const [showDialog, setShowDialog] = useState(false);
  const [retryCallback, setRetryCallback] = useState(null);

  useEffect(() => {
    setLastErrors(errorManager.getErrors());
    errorManager.clearErrors();
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLastErrors(null);
    }, 5000);
    return () => clearTimeout(timer);
  }, [lastErrors]);

  function handleRetry(callback) {
    setShowDialog(false);
    setRetryCallback(() => callback);
  }

  function handleConfirmRetry() {
    setShowDialog(false);
    retryCallback();
  }

  return {
    errors: lastErrors,
    handleRetry,
    showDialog,
    setShowDialog,
    handleConfirmRetry,
  };
}

function MyComponent() {
  const { errors, handleRetry, showDialog, setShowDialog, handleConfirmRetry } =
    useErrorManager();

  function handleButtonClick() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        // do something with data
      })
      .catch(error => {
        if (error instanceof NetworkError) {
          setShowDialog(true);
          handleRetry(() => handleButtonClick());
        } else {
          addError(error);
        }
      });
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Fetch Data</button>
      {errors && (
        <div>
          <ul>
            {errors.map((error, index) => (
              <li key={index}>{error.message}</li>
            ))}
          </ul>
          <button onClick={() => setShowDialog(true)}>Retry</button>
        </div>
      )}
      {showDialog && (
        <div>
          <p>Network error occurred. Retry?</p>
          <button onClick={handleConfirmRetry}>Yes</button>
          <button onClick={() => setShowDialog(false)}>No</button>
        </div>
      )}
    </div>
  );
}

上面的代码在 MyComponent 中增加了一个网络错误的处理逻辑。当发生网络错误时，我们弹出一个对话框，让用户选择是否重试。在 useErrorManager 中，我们增加了 showDialog 和 setShowDialog 状态，用于控制对话框的显示和隐藏。handleRetry 方法用于设置重试的回调函数，handleConfirmRetry 方法用于执行重试操作。

总结

本文介绍了如何在 React 开发中统一管理和响应错误信息。我们可以通过一个错误管理器来集中存储所有错误信息，并根据错误类型采取不同的响应方式。同时，我们还可以进一步优化错误信息的提示和处理，提高用户体验。希望本文对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a28a9eb4cecbf2df5b0cf