Using error boundaries in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a class component that can catch errors using an error boundary.

React

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: [1] };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Cnull

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Returning false instead of true causes the error UI not to show.

Returning null does not update the state.

Returning the error object instead of a boolean.

The getDerivedStateFromError method should return an object that updates the state to indicate an error occurred. Setting hasError to true triggers the fallback UI.

2fill in blank

medium

Complete the code to log the error and info when an error is caught in the error boundary.

React

componentDidCatch(error, info) {
  [1](error, info);
}

Drag options to blanks, or click blank then click option'

Aalert

Bthrow

Cconsole.log

Dconsole.error

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert causes annoying popups.

Using console.log does not highlight errors clearly.

Throwing the error again breaks the app.

The componentDidCatch lifecycle method is used to log errors. Using console.error helps to clearly mark error logs in the console.

3fill in blank

hard

Fix the error in the code by completing the render method to show fallback UI when an error occurs.

React

render() {
  if (this.state.[1]) {
    return <h2>Oops! Something went wrong.</h2>;
  }
  return this.props.children;
}

Drag options to blanks, or click blank then click option'

AisError

Berror

ChasError

DerrorOccurred

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong state property name causes the fallback UI never to show.

Using undefined state properties causes runtime errors.

The state property used to track errors is hasError. Checking this in render allows showing fallback UI.

4fill in blank

hard

Fill both blanks to create an error boundary that resets error state when a button is clicked.

React

class ResettableErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: [1] };
  }

  resetError = () => {
    this.setState({ hasError: [2] });
  };

  render() {
    if (this.state.hasError) {
      return <>
        <h1>Error occurred.</h1>
        <button onClick={this.resetError}>Try again</button>
      </>;
    }
    return this.props.children;
  }
}

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cnull

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Setting error state to null causes fallback UI to not show.

Not resetting error state prevents retrying.

When an error happens, hasError is set to true. The resetError method sets it back to false to retry rendering children.

5fill in blank

hard

Fill the blanks to create a functional component using React 19+ hooks that manages error state with an error boundary wrapper.

React

import React, { [1] } from 'react';

function ErrorBoundaryWrapper({ children }) {
  const [hasError, setHasError] = [2](false);

  function onError() {
    setHasError(true);
  }

  if (hasError) {
    return <div>Something went wrong.</div>;
  }

  return <ErrorBoundary onError={onError}>{children}</ErrorBoundary>;
}

Drag options to blanks, or click blank then click option'

AuseState

BuseEffect

DuseReducer

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState for state management.

Not importing the hook causes errors.

Confusing useReducer with useState.

The component uses useState hook to track error state. The first blank imports useState (A), the second blank initializes state with useState(false) (C).