Handling runtime errors in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a React component throws an error during rendering?

Consider a React functional component that throws an error inside its body during rendering. What will be the visible result in the browser if no error boundary is used?

React

function BuggyComponent() {
  throw new Error('Oops!');
  return <div>Hello</div>;
}

A The component renders nothing and the error is silently ignored.

B React displays the error message on the page automatically.

C React shows a blank screen and logs the error in the console.

D The entire React app crashes and unmounts all components.

💡 Hint

Think about what React does by default when a component throws an error and no error boundary is present.

When a React component throws an error during rendering and there is no error boundary, React stops rendering that component tree and shows a blank screen. The error is logged in the browser console for debugging.

React does not automatically display the error message on the page, nor does it silently ignore the error. The entire app does not crash, but the affected component tree is unmounted.

📝 Syntax

intermediate

Which code correctly implements an error boundary in React?

Select the option that correctly defines a React error boundary component.

A

function ErrorBoundary({children}) {
  const [hasError, setHasError] = React.useState(false);
  try {
    return children;
  } catch {
    setHasError(true);
    return <div>Error occurred</div>;
  }
}

B

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

C

function ErrorBoundary({children}) {
  const [hasError, setHasError] = React.useState(false);
  React.useEffect(() => {
    window.onerror = () => setHasError(true);
  }, []);
  if (hasError) return <div>Error occurred</div>;
  return children;
}

D

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>Error occurred</div>;
    }
    return this.props.children;
  }
}

💡 Hint

Error boundaries must be class components with specific lifecycle methods.

In React 18, error boundaries must be class components that implement static getDerivedStateFromError or componentDidCatch. Functional components cannot catch errors during rendering with try/catch or hooks.

Option D correctly implements an error boundary as a class component.

🔧 Debug

advanced

Why does this React error boundary fail to catch errors?

Examine the code below. Why does the error boundary not catch errors thrown inside the component?

React

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

function Child() {
  throw new Error('Crash');
  return <div>Child</div>;
}

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

A ErrorBoundary lacks getDerivedStateFromError, so it cannot update state on error.

B componentDidCatch does not update state synchronously, so the error is missed.

C ErrorBoundary catches errors only in lifecycle methods, not during rendering of children.

D The error is thrown outside React's render phase, so ErrorBoundary cannot catch it.

💡 Hint

Check React docs on error boundaries and required methods to update state on error.

Error boundaries must implement static getDerivedStateFromError to update state when an error occurs during rendering. componentDidCatch is for side effects like logging but does not update state automatically.

Without getDerivedStateFromError, the error boundary does not re-render with error UI.

❓ state_output

advanced

What is the state value after an error is caught in this error boundary?

Given the following error boundary, what will be the value of this.state.hasError after Child throws an error?

React

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.log('Error logged');
  }
  render() {
    if (this.state.hasError) return <div>Error caught</div>;
    return this.props.children;
  }
}

function Child() {
  throw new Error('Crash');
  return <div>Child</div>;
}

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

A null

B true

C undefined

D false

💡 Hint

getDerivedStateFromError updates state when an error happens during rendering.

The static method getDerivedStateFromError returns { hasError: true }, which updates the component state to true when an error is caught during rendering.

🧠 Conceptual

expert

Which statement about React error boundaries is true?

Select the only correct statement about React error boundaries.

A Error boundaries catch errors during rendering, lifecycle methods, and constructors of child components.

B Error boundaries can be implemented using React hooks in functional components.

C Error boundaries catch errors in event handlers and asynchronous code automatically.

D Error boundaries prevent errors from propagating to the browser console.

💡 Hint

Recall what kinds of errors error boundaries catch and how they are implemented.

Error boundaries catch errors during rendering, lifecycle methods, and constructors of their child components.

They do not catch errors in event handlers or asynchronous code automatically.

They must be class components; hooks cannot create error boundaries.

Errors still appear in the browser console for debugging.