React | Error Boundaries and Debugging | Question 6

Last Updated :
Discuss
Comments

In the following code, what will happen when an error is thrown inside MyComponent?

JavaScript
class MyErrorBoundary extends React.Component {
    componentDidCatch(error) {
        console.log("Error caught: ", error);
    }
    render() {
        return this.props.children;
    }
}

class MyComponent extends React.Component {
    render() {
        throw new Error("An error occurred!");
    }
}

<MyErrorBoundary>
    <MyComponent />
</MyErrorBoundary>;

The error is caught by MyErrorBoundary and logged to the console

The error will crash the app

The MyComponent will re-render without throwing an error

The error is caught but not logged

Share your thoughts in the comments