掌握 React 中的错误边界：有效错误处理指南

什么是误差边界？

构建应用程序时，错误是不可避免的。它们可能来自 API、UI 或其他几个地方。

尽管有这些错误，但优雅地处理这些错误并保持良好的用户体验非常重要。

错误边界是 React 中错误处理的一种方式。

---

错误边界有什么帮助？

为了理解这一点，我们先了解一下引入误差边界之前的情况。

在错误边界之前，组件内部发生的错误最终会传播并破坏 UI 或呈现白屏。

这导致了非常糟糕的用户体验。

错误边界帮助我们处理此类错误并显示后备 UI，而不是破坏 UI 或显示白屏。

---

如何使用误差边界？

React v16 正式引入了Error Boundary。

它是一个基于类的组件，可用于包装您的应用程序。

它接受要显示的后备 UI，以防您的应用程序出现错误或其他情况，它只是渲染子组件以恢复应用程序的正常流程。

这是 React 文档建议的使用方式，

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}

---

React 的错误边界有什么问题？

它无法捕获

中发生的错误

• 事件处理程序（这些错误需要使用 try-catch 块处理）
• 异步代码（API、setTimeout、requestAnimationFrame 等）
• 服务端渲染
• 错误边界本身发生的错误
• 它不适用于功能组件。尽管我们可以通过一些代码更改来使其工作。
• 里面不能使用挂钩。

---

解决办法是什么？

有一个名为react-error-boundary的npm包，它是传统错误边界组件之上的包装器。

使用这个包，我们能够克服传统错误边界组件中面临的所有问题。

---

如何使用？

您可以使用 .

包装整个应用程序，也可以使用 .

包装单个组件

实施的粒度由您决定。

让我们了解如何使用它。

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}

这是使用 ErrorBoundary 的最简单的示例。这个库还有更多内容。

---

了解反应错误边界 API

让我们尝试了解不同场景下的 API。

1。我想针对应用程序中的错误显示通用后备 UI

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const App = () => {
 return <ErrorBoundary fallback={<div>Something went wrong</div>}>
 /* rest of your component */
 </ErrorBoundary>
 }

2。我想在我的后备组件中显示特定的错误详细信息

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}