ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2024-05-13 18:37:18  阅读:119  来源: 互联网

标签:React JavaScript 边界





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,边界
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有