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

【问题标题】：Create React App not showing error message with ErrorBoundary创建 React App 不显示带有 ErrorBoundary 的错误消息
【发布时间】：2018-01-20 07:22:03
【问题描述】：

我正在学习如何使用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。

【问题讨论】：

ErrorBoundary 组件在哪里使用以及 Home 在哪里使用
抱歉，我已经修改了
当我在 componentDidCatch 中进行控制台登录时，它永远不会被调用。那是对的吗？ hasError 总是假的。
这能回答你的问题吗？ React still showing errors after catching with ErrorBoundary

标签： reactjs create-react-app

【解决方案1】：

根据 github 上的 this 问题，

在页面刷新时，我看到了对不起，发生了错误，字面意思是其次是向用户显示的完整错误堆栈。

@DanAbramov 明确表示

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

错误边界主要用于生产，但在我们希望让错误尽可能高可见。

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

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

查看CodeSandbox：

【讨论】：

这个答案有数百个小时我可能已经投入了这个神秘的问题。官方文档中没有提到这一点。
非常感谢。另外，能否请您指出 DanAbramov 提到它的链接？
谢谢！我已经浪费了几个小时来寻找这个。
我爱你！我希望我能在两小时前找到这个答案。

【解决方案2】：

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

【讨论】：

【解决方案3】：

错误边界有助于在生产中显示后备 UI。在开发中，你仍然可以看到错误（正如官方反应文档中提到的，这是故意的）。只需关闭十字图标，您就可以看到您的后备 UI。

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

componentDidCatch 是记录错误。

【讨论】：

【解决方案4】：

如文件所述

错误边界是捕捉 JavaScript 错误的 React 组件在其子组件树中的任何位置，记录这些错误，然后显示一个后备 UI 而不是崩溃的组件树。错误边界在渲染期间捕获错误，在生命周期方法中，并在它们下面的整棵树的构造函数中。

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

查看此codepin

【讨论】：