React错误处理和记录的最佳实践

![1_Q4siw3Tjji6ZCvJ0Aynd-A.jpeg][1]
前端开发人员经常忽视错误处理和日志记录。然而，如果任何代码段抛出一个错误，你必须正确处理它。此外，根据不同的情况，有几种方法可以在React中管理和记录错误。

本文将介绍不同场景下React中错误处理和日志的最佳实践。让我们开始吧。

**错误处理 - 最佳实践**
---------------

正确的错误处理对于应用程序的正常运行至关重要。让我们看看围绕错误处理的几种做法。

**1. 使用错误边界的错误处理--针对类组件**

错误边界是处理React组件内发生的错误的最直接和有效的方法。

如果你使用类组件，你可以通过包含生命周期方法componentDidCatch(error, info)来创建一个错误边界组件。最好是使用这个函数将错误信息记录到你喜欢的错误记录服务中。

此外，你可以使用静态函数getDerivedStateFromError(error)来更新状态，并在发生错误时使用render()方法来显示一个回退的用户界面。

下面是一个错误边界组件的例子
```
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

static getDerivedStateFromError(error) {
    return { hasError: true };
  }

componentDidCatch(error, errorInfo) {
    //log the error to an error reporting service
    errorService.log({ error, errorInfo });
  }

render() {
    if (this.state.hasError) {
      return <h1>Oops, something went wrong.</h1>;
    }
    return this.props.children; 
  }
}
```
之后，你只需要将所需的组件包裹在错误边界组件内。
```
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>
```

由你来定义错误边界的颗粒度。例如，你可以在错误边界中包裹顶级路由组件，向用户展示一个常见的错误页面，或者在错误边界中包裹单个小工具。

> **如果错误发生在错误边界之外，整个React组件树将被取消挂载，导致你的应用程序崩溃。**

因此，确保易出错的组件被包裹在一个错误边界组件中。尽管错误边界是处理错误的一个很好的方法，但它们确实有一些缺点。例如，组件DidCatch(error, info)生命周期方法只有在渲染时、生命周期方法或组件的任何子组件的构造函数中发生错误时才会被调用。

因此，错误边界，不能处理事件处理程序、异步回调或服务器端渲染中的错误。

**2. 用Try-Catch处理错误--Catch超越边界**
--------------------------------

Try-catch块并不是处理组件级异常的最佳方式，因为它们不能捕获从子组件级联的异常。
然而，try-catch块是用来处理那些没有被错误边界捕获的错误的。
考虑一个用户注册的场景，我们对一个API进行异步调用。在这里，我们可以使用try-catch和React状态来处理任何可能发生的错误。
```
function SignUpButton(props) {
    const [hasError, setError] = React.useState(false);
    const handleClick = async () => {
        try {
            await api.signUp();
        } catch(error) {
            errorService.log(error)
            setError(true);
        }
    }
    if (hasError) {
        return <p>Sorry, Sign up failed!</p>;
    }
    return <button onClick={handleClick}>Sign up</button>;
}
```
同样，在错误界限无效的情况下，也可以使用try-catch。然而，这在某些情况下会导致代码的重复。

**3. 使用 react-error-boundary 库--最好的方法**

react-error-boundary库大大简化了React中的错误处理，是克服基本错误边界限制的最有效的解决方案。
它使你能够显示一个回退组件，记录错误，就像在基本错误边界中一样，并重置应用程序的状态，因此错误不会再次发生。
```
import {ErrorBoundary} from 'react-error-boundary'

function MyFallbackComponent({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

export default function App() {
  return (
    <ErrorBoundary 
       FallbackComponent={MyFallbackComponent}
       onError={(error, errorInfo) => errorService.log({ error, errorInfo })}
       onReset={() => {
         // reset the state of your app
       }}
    >
       <MyErrorProneComponent />
    </ErrorBoundary>
  );
}
```

> **更重要的是，你现在可以使用useErrorHandler()自定义钩子处理事件处理程序和异步代码中的错误。**

如果useErrorHandler(error)钩子被调用时有一个真实的错误值，react-error-boundary会将其传播到最近的错误边界。

因此，你可以使用 react-error-boundary 来消除你的应用程序中对两种不同错误处理方法的需求。

**错误日志 - 最佳实践**
---------------

许多开发人员都熟悉控制台日志，但只有少数人了解如何在React应用程序中持久地记录错误。尽管控制台日志在开发过程中有助于错误根基的检测，但一旦应用被部署，它们就会变得无效，因为它是在用户的浏览器上执行的。

因此，我们需要创建一个后端错误日志服务或第三方服务来跟踪错误。

此外，日志分析可以帮助我们了解应用程序用户如何与应用程序互动。这对于识别用户的行为和安全风险很有帮助。

> **例如，大量失败的登录尝试可能表明有人试图获得对你的应用程序的未授权访问。**

**记录的最佳工具**
-----------

你可以使用第三方的客户端日志服务来持久地记录错误。以下是一些最好的React的日志服务提供商，你可以尝试一下。

**Sentry**
----------

Sentry为React提供了一个自定义错误边界组件，自动将组件树内的JavaScript错误发送到Sentry。你可以类似于React的基本错误边界组件来使用它。

**redux-logger**
----------------

redux-logger也被称为Logger for Redux，允许你用自定义选项创建自己的日志。它使用起来很简单，允许控制台和生产级的日志定制。

**日志级别**
--------

Log level代替了标准的console.log()，具有基于级别的日志和过滤功能，让你对日志有更多的控制。它的功能比Sentry或redux-logger少，但它有我们大多数人需要的基本功能。

你可以使用loglevel-plugin-remote将日志发送到一个远程日志服务器进行存储、分析和报警。你不应该发送纯文本，而应该以JSON对象的形式发送日志，这样就可以很容易地对它们进行分类和组织。

**提示：建立更好的组件库和设计系统**
--------------------

在不同的团队和项目中共享组件，以加快开发速度，并确保你的用户在每个接触点都能体验到一致的设计。
像Bit这样的开放源码软件工具为跨团队和应用程序构建、共享和采用组件提供了良好的开发体验。
![0_LPajFVmGZV8xibru.png][2]

**结论**
------

任何高质量的应用程序都必须处理错误和意外事件。错误应该被处理并适当地记录，以帮助你确定错误的根本原因，同时对用户体验的影响最小。本文讨论了可用于实现这一目标的各种方法，我希望它能帮助你开发出更强大的React应用程序。

[1]: http://guobacai.com/usr/uploads/2021/11/5223225.jpeg
  [2]: http://guobacai.com/usr/uploads/2021/11/716413742.png

React错误处理和记录的最佳实践

评论已关闭