Why React still render the child component with Error Boundary

Question

I use React 16 with Error Boundary functionality: Profile.js

class Profile extends Component {
constructor(props) {
    super(props);
    this.state = {
        // user: {
        //     name: "Ha (Huck) H.K. NGUYEN"
        // }
        user: null
    };
    this.updateUser = this.updateUser.bind(this);
}

updateUser() {
    this.setState({ user: null })
}

render() {
    const { user } = this.state;
    console.log(user);
    return <div className="App">
            {user.name}
            <button onClick={this.updateUser}>
                Update
            </button>
        </div>
}
}

ErrorBoundary.js

class ErrorBoundary extends Component {
constructor(props) {
    super(props);
    this.state = {
        hasError: false
    }
}
componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
}
render() {
    const { children } = this.props;
    const { hasError } = this.state;
    if (hasError) {
        return <HasError />
    }
    return children
}
}

App.js

class App extends Component {
render() {
    return <div className="App">
    <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
    </header>
    <ErrorBoundary>
        <Profile />
    </ErrorBoundary>
</div>
}
}

I saw the functional component is still called after the error happened and has been caught. Can anyone please explain why the render function is called.

For someone doesn't know, follow the answer from link, you can see the error boundary by press the key esc.

Possible Duplicate of https://stackoverflow.com/questions/48353695/create-react-app-not-showing-error-message-with-errorboundary/48354840#48354840 — Shubham Khatri, Jul 23 '18 at 06:05
@ShubhamKhatri He knows you can hit `esc` or `x` to close the error boundary, but he wants to know why he is still getting an error I think. Not the same question. — leogoesger, Jul 23 '18 at 16:09
@leogoesger, I added an explanation to OP question as well in my answer — Shubham Khatri, Jul 23 '18 at 16:46

score 2 · Accepted Answer · answered Jul 23 '18 at 16:46

As you already mentioned in your question that pressing Esc cancels the overlay and you can see the ErrorBoundary message and the visibility of the overlay is limited to development environment.

You can check more about it here

However as to why the render function is executing, you need to know that once the render function is executed and there is a RuntimeError that is being thrown by your code, is the only time that componentDidCatch method of your ErrorBoundary. Also create-react-app has a functionality whereby it listens to the RuntimeErrors that are being produced and it reports the root cause of the Error which is what you see in the overlay.

To check the relevant code that produces the Overlay, you can check this github code

I hope I am able to answer your question.

leogoesger · Answer 2 · 2018-07-23T16:10:37.500

https://codesandbox.io/s/nn9kw2k3ql

Here is a working example, you will need to press esc.

I put in your Profile without changing anything, and it worked as expected as well.

Just to be clear...

The red-ish overlay that you can click esc on, will be removed once you are in production setting. They are for development use only. That's why you want to implement errorBoundary which will work in both cases.

So if there is some error in your code during development, both errors will show up.

And if you look at the console, you get these messages:

false // from ErrorBoundary this.state.error
i am here  // inside the potential error componenet
i am here  // inside the potential error componenet
The above error occurred in the <Profile> component: //from Error Boundary
true // from ErrorBoundary this.state. error

First false is coming from ErrorBoundary, because on initial load, there is no error, so it will try to render the children, then it logs i am here in the children. And found error, and update the errorboundary component. After that, you do not see I am here again, because errorboundary kicked in and no longer rendering the children

In order for errorBoundary to know there is some error in its children, error has to occur first. Otherwise it does not know. JS is a dynamically typed lang, everything needs to happen during run time.

Yes, I know, but the `console.log(user)` in `Profile` still run, I don't know why. :D You can check at line 21 in the sandbox, `ErroComp`. :D — Einsamer, Jul 23 '18 at 03:23
@Einsamer I think there are mis-understading on how error boundary works in comparsion to errorhandling in create-react-app. In production, those error overlay will be disabled. Only the Error message be displayed. — leogoesger, Jul 23 '18 at 03:29
@Einsamer I added a bit more description to clear things up a bit. Basically in order for `errorBoundary` to know there is an error which triggers re-render, an error has to occur first since everything happens in run-time in JS — leogoesger, Jul 23 '18 at 03:37

Shahriat Hossain · Answer 3 · 2018-07-23T02:56:45.170

1

I think you have a wrong condition as follows:

if (!hasError) {
        return <HasError />
    }

Here you want to show error if hasError is true, right? otherwise will render Profile component.

And also componentDidCatch is built in react16 so if render function throws any error this method will be triggered automatically.

edited Jul 23 '18 at 02:56

answered Jul 23 '18 at 02:51

Shahriat Hossain

340
4
12

in your case your user.name is null so render method throws the error and componentDidCatch method is calling automatically. – Shahriat Hossain Jul 23 '18 at 02:59
Yes, that's what I need. But after that, the `` is still called. It overlays my error handling page. – Einsamer Jul 23 '18 at 03:00
you can see, the `return ` should never be called if the `hasError` is true. You can see the console log in the picture – Einsamer Jul 23 '18 at 03:02
One thing you can do here as follows: let myRenderVal = if (hasError) { myRenderVal = } return {myRenderVal}; – Shahriat Hossain Jul 23 '18 at 03:09
just a single correction in my code: return(
{myRenderVal}
); – Shahriat Hossain Jul 23 '18 at 03:31

Why React still render the child component with Error Boundary

3 Answers3