创建 React App 不显示带有 ErrorBoundary 的错误消息

IT技术 reactjs create-react-app
2021-04-02 22:05:04

我正在学习如何使用componentDidCatch(). 它看起来很直。它有效,但仍然显示完整的错误堆栈。

在单独的文件中:

import React, { Component } from 'react'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    }
  }

  componentDidCatch(error, info) {
    console.log("Catching an error") // this is never logged
    this.setState(state => ({...state, hasError: true }))
  }

  render() {
    if (this.state.hasError) { return <div>Sorry, an error occurred</div> }

    return this.props.children
  }
}
export default ErrorBoundary

      ...

import React, { Component } from 'react'

class Foo extends Component {

  render() {
    return this.props.a.b; // So this should cause the error
  }
}
export default Foo

      ...

import React, { Component } from 'react'
// Imported Foo and ErrorBoundary

class Home extends Component {

  render() {
    return <ErrorBoundary><Foo /></ErrorBoundary>
  }
}
export default Home

在页面刷新时,我看到Sorry, an error occurred了,从字面上看,一秒钟然后向用户显示完整的错误堆栈。这是 Create React App 的问题吗?我正在使用 React 16。

4个回答

根据github上的这个问题,

在页面刷新时,我看到很抱歉,发生了一个错误,字面上是一秒钟,然后向用户显示了完整的错误堆栈。

@DanAbramov 已经明确表示

这是故意的。意外错误仍然是错误。(我们不建议对预期错误或控制流使用错误边界。)

错误边界主要用于生产,但在开发中,我们希望使错误尽可能高度可见。

此外,错误可见只是一个叠加层,您的ErrorBoundary消息隐藏在错误叠加层后面

要检查错误是否确实存在,您可以检查元素并从 DOM 中删除覆盖,您将能够看到错误消息

检查这个CodeSandbox

这个答案有数百个小时我可能已经投入到这个神秘问题上。官方文档中没有提到这一点。
2021-05-25 22:05:04
多谢。另外,您能否指点我丹阿布拉莫夫提到的链接?
2021-06-04 22:05:04
谢谢!我已经浪费了几个小时来寻找这个。
2021-06-04 22:05:04
我爱你!我希望我在两个小时前找到了这个答案。
2021-06-16 22:05:04

完整的错误堆栈只是在开发模式下运行应用程序时显示的一个叠加层。它不会在生产中显示。(您可以通过单击右上角的“X”按钮关闭它。)

错误边界有助于在生产中显示回退 UI。在开发中,您仍然可以看到错误(如官方 react 文档中所述,这是故意的)。只需关闭十字图标,您就可以看到您的后备 UI。

static getDerivedStateFromError 更新状态,因此当组件重新渲染时,将显示回退 UI。

componentDidCatch 是记录错误。

正如文件所说

错误边界是 React 组件,它在其子组件树中的任何位置捕获 JavaScript 错误,记录这些错误,并显示回退 UI 而不是崩溃的组件树。错误边界在渲染过程中、生命周期方法中以及在它们下面的整个树的构造函数中捕获错误。

即使在您使用时componentDidCatch也会记录错误

签出这个代码针