Create React App not showing error message with ErrorBoundary

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.

Where is the ErrorBoundary component used and also where is Home used — Shubham Khatri, Jan 20 '18 at 07:38
When I console log inside componentDidCatch, it never gets called. Is that correct? `hasError` is always false. — Sylar, Jan 20 '18 at 07:41
Does this answer your question? [React still showing errors after catching with ErrorBoundary](https://stackoverflow.com/questions/52096804/react-still-showing-errors-after-catching-with-errorboundary) — ggorlen, Dec 25 '20 at 07:36

Shubham Khatri · Accepted Answer · 2018-03-06T18:34:00.277

26

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:

edited Mar 06 '18 at 18:34

answered Jan 20 '18 at 10:08

Shubham Khatri

270,417
55
406
400

4

This answer has hundreds of hours I might have put into this mystery question. Nowhere in the official documentation is this mentioned. – Deepak Pathak Oct 21 '19 at 10:03
thanks alot. Also could you please point me to the link where DanAbramov has mentioned it ? – Deepak Pathak Oct 21 '19 at 10:04
Thanks! I've lost hours looking for this. – clluiz Oct 15 '20 at 15:54
I love you! I wish I found this answer two hours ago. – Ruslan Polutsygan Apr 08 '21 at 09:41

Jonathan · Answer 2 · 2020-04-29T04:02:11.283

7

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. (You can close it by clicking the 'X' button in the top-right corner.)

edited Apr 29 '20 at 04:02

answered Jan 19 '20 at 13:17

Jonathan

32,202
38
137
208

score 3 · Answer 3 · answered Oct 07 '21 at 08:03

Error boundary is helpful to display the fallback UI in production. In development, you can still see the error(As mentioned in official react docs, this is intentional). Simply close the cross icon and you can see your fallback UI.

static getDerivedStateFromError updates the state so when the component re-renders the fallback UI will be shown.

componentDidCatch is to log an error.

score 1 · Answer 4 · answered Jan 20 '18 at 09:32

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

Create React App not showing error message with ErrorBoundary

4 Answers4

Linked

Related