Error boundaries concept in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an error occurs inside a child component wrapped by an error boundary?

Consider a React app where a parent component uses an error boundary to wrap a child component. If the child component throws an error during rendering, what will be the visible result?

React

function ErrorBoundary({children}) {
  const [hasError, setHasError] = React.useState(false);
  React.useEffect(() => {
    // This is a simplified example, real error boundaries use componentDidCatch
  }, []);
  if (hasError) {
    return <div>Something went wrong.</div>;
  }
  return children;
}

function BuggyComponent() {
  throw new Error('Crash!');
  return <div>All good</div>;
}

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

A The error is ignored and the buggy component renders normally.

B The error boundary catches the error and displays 'Something went wrong.' instead of the buggy component.

C The app crashes completely and shows a blank screen.

D The error boundary logs the error but still renders the buggy component's output.

💡 Hint

Think about what error boundaries are designed to do in React.

Error boundaries catch errors in their child components during rendering and lifecycle methods, then display a fallback UI instead of crashing the whole app.

❓ lifecycle

intermediate

Which lifecycle method is used in class components to catch errors for error boundaries?

In React class components, which lifecycle method allows an error boundary to catch errors from its child components?

A componentDidCatch(error, info)

B shouldComponentUpdate(nextProps, nextState)

C componentWillUnmount()

D getDerivedStateFromError(error)

💡 Hint

This method receives error details and is called after an error is thrown.

componentDidCatch(error, info) is the lifecycle method where error boundaries catch errors and can perform side effects like logging.

📝 Syntax

advanced

Identify the correct way to define an error boundary using a class component.

Which of the following class components correctly implements an error boundary in React?

A

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.log(error, info);
  }
  render() {
    if (this.state.hasError) {
      return <h1>Oops!</h1>;
    }
    return this.props.children;
  }
}

B

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error) {
    this.setState({ hasError: true });
  }
  render() {
    if (this.state.hasError) {
      return <h1>Error!</h1>;
    }
    return this.props.children;
  }
}

C

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  getDerivedStateFromError(error) {
    this.setState({ hasError: true });
  }
  render() {
    if (this.state.hasError) {
      return <h1>Error caught</h1>;
    }
    return this.props.children;
  }
}

D

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  componentDidCatch(error, info) {
    this.state.hasError = true;
  }
  render() {
    if (this.state.hasError) {
      return <h1>Error!</h1>;
    }
    return this.props.children;
  }
}

💡 Hint

Remember that getDerivedStateFromError is static and returns new state, and state should not be mutated directly.

Option A correctly uses static getDerivedStateFromError to update state and componentDidCatch for side effects. Other options misuse lifecycle methods or mutate state directly.

🔧 Debug

advanced

Why does this functional component error boundary not catch errors?

Look at this React functional component intended as an error boundary. Why does it fail to catch errors from its children? function ErrorBoundary({children}) { try { return children; } catch (e) { return

Error caught

; } } function Buggy() { throw new Error('Oops'); return

Safe

; } function App() { return ; }

A The error boundary must use useEffect hook to catch errors in children.

B The try/catch block is missing a finally clause to handle errors properly.

C React error boundaries must be class components; try/catch in functional components does not catch render errors.

D The Buggy component does not throw an error during rendering, so no error is caught.

💡 Hint

Think about how React handles errors during rendering and the limitations of try/catch in JSX.

React only supports error boundaries as class components with lifecycle methods. Functional components cannot catch render errors with try/catch because rendering happens outside the function call.

🧠 Conceptual

expert

What is the main limitation of React error boundaries regarding error types they can catch?

Error boundaries in React catch errors in their child components. Which of the following best describes a limitation of error boundaries?

A They catch all JavaScript errors anywhere in the app, including event handlers and asynchronous code.

B They catch errors only in functional components but not in class components.

C They only catch errors in server-side rendering but not in client-side rendering.

D They catch errors during rendering, lifecycle methods, and constructors of child components but not errors in event handlers.

💡 Hint

Consider where React error boundaries are designed to catch errors and where they do not.

React error boundaries catch errors during rendering, lifecycle methods, and constructors of child components but do not catch errors in event handlers or asynchronous code.