如何在反应中正确使用反应错误边界？答案

【问题标题】：How to use react-error-boundary properly in react?如何在反应中正确使用反应错误边界？
【发布时间】：2022-03-30 13:08:19
【问题描述】：

我已经实现了react-error-boundary npm 库的一个示例。但它似乎无法正常工作。

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

function ErrorFallback({ error }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: 'red' }}>{error.message}</pre>
    </div>
  );
}

function Greeting({ subject }) {
  return <div>Hello {subject.toUpperCase()}</div>;
}

function Farewell({ subject }) {
  return <div>Goodbye {subject.toUpperCase()}</div>;
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Greeting />
      <Farewell />
    </ErrorBoundary>
  );
}

export default App;

错误信息如下图：

ErrorFallback 组件似乎没有渲染。我认为我做错了什么会破坏代码。

【问题讨论】：

标签： reactjs react-error-boundary

【解决方案1】：

这是开发期间错误边界的预期行为。按右上角的关闭（X）按钮隐藏错误堆栈，您将看到错误边界回退

在生产中不会显示错误堆栈，用户只会看到错误边界回退。

【讨论】：

这是错误边界在开发和生产过程中的预期行为，将显示错误消息而不是完全白屏。当我们点击 X 关闭按钮时，会显示实际的后备错误消息。
谢谢 - 您的评论比我的回答写得更清楚。我已经更新了我的答案以匹配。