React 错误边界：优雅处理错误的指南

React 围绕 JavaScript 展开，随着应用程序的扩展，某些组件可能会变得容易出错，从而导致空白页面问题。为了解决这个问题，我们应该合并错误边界。当发生错误时，这些边界将显示替代 UI，允许用户导航回来或重试。本文将探讨如何使用错误边界来优雅地处理 React 中的错误。

什么是误差边界？

将 React 中的错误边界视为安全网。他们就像监护人，监视着舞台（应用程序）上的一群表演者（组件）。如果任何表演者跌倒（发生 JavaScript 错误），安全网（错误边界）会抓住他们。然后，它会记录发生的情况并张贴海报（后备 UI），直到表演者准备好返回舞台。

在 React 中实现错误边界

React 支持两种类型的组件：基于类的组件和函数式组件。然而，如果我们想实现一个错误边界，我们不能用函数式组件来实现；我们需要为错误边界创建一个基于类的组件。但不用担心，React 社区非常广泛，并且许多第三方包可以帮助您直接使用 React 错误边界组件，而不是自己创建它。

我们将使用该react-error-boundary包，它提供了一个 ErrorBoundary 组件来捕获错误并显示后备 UI。它提供了多种方法来显示后备 UI。

让我们首先react-error-boundary在 React 项目中安装作为依赖项。
 

yarn add react-error-boundary

OR

npm install react-error-boundary

OR

pnpm add react-error-boundary

安装依赖项后，创建发生错误时要显示的后备组件。
 

import React from "react";
import { FallbackProps } from "react-error-boundary";
import ErrorFallbackIcon from "./error-fallback.svg";

const ErrorFallback: React.FC<FallbackProps> = ({
  error,
  resetErrorBoundary,
}) => {
  return (
    <div className="error-boundary-fallback-wrapper">
      <ErrorFallbackIcon />
      <h1>Something went wrong</h1>
      <p>{error.message}</p>
      <button onClick={resetErrorBoundary}>Home</button>
    </div>
  );
};

export default ErrorFallback;

后备组件接受两个 props。

error：包含错误消息的错误对象。

resetErrorBoundary：重置错误边界并重试渲染的回调函数。

好的，我们已经准备好了后备组件。现在，让我们ErrorBoundary用 提供的组件包装我们的应用程序react-error-boundary。
 

import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { useHistory } from 'react-router-dom';
import ErrorFallback from './ErrorFallback';

interface Props {
  children: React.ReactNode;
}

const App: React.FC<Props> = ({ children }) => {
  const history = useHistory();

  const handleErrorReset = () => {
    history.push("/");
  };

  return (
    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={handleErrorReset}>
      {children}
    </ErrorBoundary>
  );
};

export default App;

该ErrorBoundary组件接受多个 props，但重要的是：

FallbackComponent：发生错误时渲染的后备组件。

onReset：回调函数重置应用程序的状态，以便错误不再发生。

好的，我们的应用程序现在被错误边界包围了。作为普通用户，如果您与应用程序交互并在特定页面上遇到导致崩溃的错误，您将被定向到回退页面，而不是看到空白页面。此页面将显示确切的错误消息，并为您提供返回的选项。


 

结论

使用该包在 React 中实现错误边界react-error-boundary有助于优雅地处理错误，并在发生错误时为用户提供后备 UI。通过合并错误边界，开发人员可以通过防止空白页面并提供向后导航或重试的选项来确保更好的用户体验。

标签：React,JavaScript,边界
来源：