如何在反应中正确地使用反应-错误边界？

Question

我已经实现了一个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组件似乎没有呈现。我想我做错了什么，破坏了密码。

Answer 1

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

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