掌握 React 中的错误边界：有效错误处理指南-js教程-PHP中文网

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

WBOY

发布： 2024-07-20 00:55:30

原创

718 人浏览过

Mastering Error Boundaries in React: A Guide to Effective Error Handling

什么是误差边界？

构建应用程序时，错误是不可避免的。它们可能来自 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}

); } const App = () => { return { // Reset the state of your app so the error doesn't happen again }} > /* rest of your component */ }

登录后复制

import React from 'react'; import { ErrorBoundary } from "react-error-boundary"; const Fallback = ({ 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}

import React from 'react'; import { ErrorBoundary } from "react-error-boundary"; const logError = (error: Error, info: { componentStack: string }) => { // Do something with the error, e.g. log to an external API }; const Fallback = ({ 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}

import { useErrorBoundary } from "react-error-boundary"; function Example() { const { showBoundary } = useErrorBoundary(); const getGreeting = async(name) => { try { const response = await fetchGreeting(name); // rest of your code } catch(error){ // Show error boundary showBoundary(error); } } useEffect(() => { getGreeting() }); return <Whatever UI you want to render/> }