reactjs - 使用 ErrorBoundary 创建 React 应用程序不显示错误消息

Question

我正在学习如何使用componentDidCatch()。它看起来笔直向前。它可以工作，但仍然可以在 View 中显示完整的错误堆栈。

在单独的文件中:

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

在页面刷新时，我看到抱歉，发生了错误，字面意思是一秒钟，然后向用户显示完整的错误堆栈。这是 Create React App 的问题吗？我正在使用 React 16。

Answer 1

根据 this github 上的问题，

On page refresh, I see Sorry, an error occurred for, literally, a second then the full error stack displaying to the user.

@DanAbramov 已明确表示

This is intentional. An unexpected error is still an error. (We don’t recommend using error boundaries for expected errors or control flow.)

Error boundaries are primarily useful for production, but in development we want to make errors as highly visible as possible.

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

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

检查这个CodeSandbox :