Using error boundaries in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a child component throws an error inside an Error Boundary?

Consider a React app where a child component throws an error during rendering. The parent component uses an Error Boundary. What will be the rendered output?

React

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) return <div>Something went wrong.</div>;
    return this.props.children;
  }
}

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

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

A The Error Boundary catches the error and renders 'Something went wrong.'

B The app crashes and shows a blank screen.

C The error is ignored and 'All good' is displayed.

D React logs the error but still renders the Buggy component output.

💡 Hint

Error Boundaries catch errors in lifecycle methods and render phase, but only in class components.

In React, Error Boundaries must be class components to catch errors during rendering. Functional components with hooks cannot catch errors thrown during render. So the error thrown in Buggy is caught by the Error Boundary, which renders the fallback UI 'Something went wrong.'.

📝 Syntax

intermediate

Which code correctly defines an Error Boundary in React 19+?

Select the option that correctly implements an Error Boundary component in React 19+ using class components.

A

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

B

function ErrorBoundary({children}) {
  try {
    return children;
  } catch {
    return <h1>Error occurred</h1>;
  }
}

C

const ErrorBoundary = () => {
  const [error, setError] = React.useState(false);
  if (error) return <h1>Error occurred</h1>;
  return <>{children}</>;
};

D

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

💡 Hint

Error Boundaries require static getDerivedStateFromError or componentDidCatch lifecycle methods.

Option D correctly uses static getDerivedStateFromError to update state on error and renders fallback UI. Option D correctly calls super(props) in constructor (fixed here) and uses componentDidCatch to update state. Options B and C are functional components which cannot catch errors during render.

🔧 Debug

advanced

Why does this Error Boundary not catch errors from a child component?

Given this Error Boundary code, why does it fail to catch errors thrown by its child components? class MyErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { error: null }; } componentDidCatch(error) { console.log('Error caught:', error); } render() { if (this.state.error) return

Oops!

; return this.props.children; } }

A The constructor is missing super(props), causing a crash.

B componentDidCatch does not update state, so fallback UI never shows.

C Error Boundaries must be functional components to catch errors.

D The render method returns children before checking for errors.

💡 Hint

componentDidCatch should update state to trigger fallback UI.

componentDidCatch logs the error but does not update state. Without updating state, the render method never shows fallback UI. The error is caught but UI does not change.

❓ state_output

advanced

What is the state value after an error is caught?

In this Error Boundary, what is the value of this.state.hasError after a child component throws an error? class Boundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } render() { if (this.state.hasError) return

Error!

; return this.props.children; } }

A true

B null

C undefined

D false

💡 Hint

getDerivedStateFromError updates state when an error occurs.

getDerivedStateFromError returns { hasError: true } which updates the state. So after an error, this.state.hasError is true.

🧠 Conceptual

expert

Which errors are NOT caught by React Error Boundaries?

React Error Boundaries catch errors in components during rendering, lifecycle methods, and constructors. Which of these errors will NOT be caught by Error Boundaries?

A Errors in lifecycle methods like componentDidMount

B Errors thrown during rendering of child components

C Errors thrown inside event handlers

D Errors thrown in constructors of child components

💡 Hint

Think about where React Error Boundaries work and where they don't.

React Error Boundaries do NOT catch errors inside event handlers. Those errors must be handled manually. They catch errors during rendering, lifecycle methods, and constructors of child components.