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

Question

我已经实现了一个react-error-boundarynpm 库的示例。但它似乎不能正常工作。

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

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

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