Error boundaries concept in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React

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

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

  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'

AcomponentDidCatch

BgetDerivedStateFromError

CrenderError

DhandleError

Attempts:

3 left

💡 Hint

Common Mistakes

Using componentDidCatch instead of getDerivedStateFromError here

Trying to use a non-existent lifecycle method

The getDerivedStateFromError method is a static lifecycle method used in error boundaries to update state when an error occurs.

2fill in blank

medium

Complete the code to log error details inside the error boundary.

React

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    [1](error, info);
  }
  render() {
    return this.props.children;
  }
}

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

Athrow

Balert

Cconsole.error

Dconsole.log

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert which interrupts user experience

Using throw which rethrows the error

console.error is used to log errors in the console, which helps in debugging.

3fill in blank

hard

Fix the error in the error boundary render method to properly display fallback UI.

React

render() {
  if (this.state.hasError) {
    return [1];
  }
  return this.props.children;
}

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

A<div>Error occurred</div>

BError occurred

C"Error occurred"

Dthis.props.children

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a plain string instead of JSX

Returning this.props.children instead of fallback UI

The render method must return valid JSX. Returning a string alone is invalid; wrapping it in a <div> makes it valid JSX.

4fill in blank

hard

Fill both blanks to create an error boundary that updates state and logs errors.

React

class ErrorBoundary extends React.Component {
  static [1](error) {
    return { hasError: true };
  }

  [2](error, info) {
    console.error(error, info);
  }

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

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

AgetDerivedStateFromError

BcomponentWillUnmount

CcomponentDidCatch

DshouldComponentUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using lifecycle methods unrelated to error handling

Mixing up method names

getDerivedStateFromError updates the state when an error occurs, and componentDidCatch logs the error details.

5fill in blank

hard

Fill the blanks to create a functional component that catches global errors using hooks.

React

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

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);

  [2](() => {
    const handleError = () => setHasError(true);
    window.addEventListener('error', handleError);
    return () => window.removeEventListener('error', handleError);
  }, []);

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

  return children;
}

export default ErrorBoundary;

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

AuseEffect

BuseCallback

CuseMemo

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useCallback or useMemo which are for memoization, not side effects

Forgetting to clean up event listeners

useEffect is used to run side effects like adding and cleaning up event listeners in functional components.