Create React App not showing error message with Er

Question

I'm learning how to use componentDidCatch(). It looks straight forward. It works, but to still show the complete error stack on view.

In separate files:

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

On page refresh, I see Sorry, an error occurred for, literally, a second then the full error stack displaying to the user. Is this an issue with Create React App? I'm using React 16.

Answer 1

As per this issue on github,

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

@DanAbramov has made it clear that

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.

Also The error visible is just an overlay and your ErrorBoundary message gets hidden behind the Error overlay

To check if the Error is actually present, you can inspect element and delete the overlay from DOM, and you would be able to see the error message

Check this CodeSandbox:

Answer 2

as the document says

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

even when when you use componentDidCatch the error will be logged

checkout this codepin

Answer 3

The full error stack is just an overlay that's shown when you run the application in development mode. It won't get shown in production.