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 MyComponent will re-render without throwing an error

The error is caught but not logged

What will be the output of the following code? JavaScript function App() { return ( <ErrorBoundary> <button onClick={() => { throw new Error(); }} > Click me </button> </ErrorBoundary> ); }

Error caught, fallback UI shown

What happens when an error occurs inside a React component? JavaScript function App() { return ( <ErrorBoundary> <div>{undefinedVar}</div> </ErrorBoundary> ); }

Error caught, fallback UI shown

Courses
Tutorials
Practice
Contests

Error Boundary and Debugging in React

Here’s a guide to Error Boundaries and Debugging: handle errors gracefully and debug React apps effectively.

Last Updated :

Discuss

Comments

Question 1

What is an error boundary in React?

A component that renders error messages on the screen
A mechanism for catching runtime errors in components
A function that validates inputs
A built-in React hook for error handling

Discuss it

Question 2

Where should error boundaries be used in React?

Around the root component only
Inside functional components only
Around components that might throw errors
Inside class components only

Discuss it

Question 3

What method is used to define an error boundary in React?

componentDidCatch()
useEffect()
componentWillUnmount()
useState()

Discuss it

Question 4

How can you handle errors in React DevTools during debugging?

Use console logs only
Use the “Components” and “Profiler” tabs in React DevTools
Install third-party plugins
Use the “Elements” tab in the browser

Discuss it

Question 5

What is the purpose of React DevTools' "Profiler" tab?

To debug errors in the code
To monitor and optimize the performance of components
To test network requests
To view the structure of the React component tree

Discuss it

Question 6

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

Discuss it

Question 7

What will be the output of the following code?

JavaScript

function App() {
    return (
        <ErrorBoundary>
            <button
                onClick={() => {
                    throw new Error();
                }}
            >
                Click me
            </button>
        </ErrorBoundary>
    );
}

Error caught, fallback UI shown
App crashes
Button works fine
No UI rendered

Discuss it

Question 8

What happens when componentDidCatch() is removed in the following code?

JavaScript

function App() {
    return (
        <ErrorBoundary>
            <button
                onClick={() => {
                    throw new Error();
                }}
            >
                Click me
            </button>
        </ErrorBoundary>
    );
}

Error still caught, not logged
App crashes
Error not caught
App re-renders

Discuss it

Question 9

What is the role of getDerivedStateFromError() in an error boundary?

JavaScript

function App() {
    return (
        <ErrorBoundary>
            <div>{undefinedVar}</div>
        </ErrorBoundary>
    );
}

Trigger re-render
Log the error
Update state on error
Display fallback UI

Discuss it

Question 10

What happens when an error occurs inside a React component?

JavaScript

function App() {
    return (
        <ErrorBoundary>
            <div>{undefinedVar}</div>
        </ErrorBoundary>
    );
}

Error caught, fallback UI shown
App crashes
App re-renders
No UI rendered

Discuss it

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion