Question

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

Answer 1

根据github上的 this 问题，

在页面刷新时，我看到抱歉，发生错误，字面意思是，a 然后显示给用户的完整错误堆栈。

@DanAbramov明确表示

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

错误边界主要用于生产，但在   我们希望尽可能高度地发现错误。

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

后面

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

检查CodeSandbox：

Answer 2

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

Answer 3

正如文件所说

错误边界是捕获JavaScript错误的React组件在他们的子组件树中的任何位置，记录这些错误，和显示后备UI而不是崩溃的组件树。在生命周期方法中，错误边界捕获渲染期间的错误，在他们下面的整棵树的建造者中。

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

结帐codepin

使用ErrorBoundary创建React App不显示错误消息

3 个答案: