Handling runtime errors in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to catch runtime errors in a React component using try-catch.

React

function Example() {
  try {
    const result = riskyOperation();
    return <div>{result}</div>;
  } catch ([1]) {
    return <div>Error occurred</div>;
  }
}

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

Ae.preventDefault()

Bevent

Cerror

Dexception

Attempts:

3 left

💡 Hint

Common Mistakes

Using event or exception as the catch variable without declaration

Calling methods like e.preventDefault() inside catch parameter

The catch block receives the error object, commonly named error or e. Here, error is the correct variable name.

2fill in blank

medium

Complete the code to display an error message when a runtime error occurs in a React component.

React

function ErrorMessage({ error }) {
  return <div role="alert">{ [1] }</div>;
}

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

Aerror.message

B"An error happened"

Cerror.stack

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Displaying the whole error object instead of its message

Using null or static text instead of dynamic error message

To show the error message, use error.message which contains the error description.

3fill in blank

hard

Fix the error in the React error boundary component by completing the missing lifecycle method name.

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'

AgetDerivedStateFromError

BshouldComponentUpdate

CcomponentWillUnmount

DcomponentDidCatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using componentDidCatch instead of getDerivedStateFromError for state update

Using lifecycle methods unrelated to error handling

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

4fill in blank

hard

Fill both blanks to correctly log error details in the error boundary's lifecycle method.

React

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

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

Aerror

Binfo

Cevent

Dprops

Attempts:

3 left

💡 Hint

Common Mistakes

Using event or props instead of info for the second parameter

Swapping the order of parameters

The componentDidCatch method receives two parameters: error and info. These provide error details and component stack info.

5fill in blank

hard

Fill all three blanks to create a functional component that catches errors using React hooks and displays a fallback UI.

React

import React, { useState, useEffect } from 'react';

function ErrorCatcher({ children }) {
  const [hasError, [1]] = useState(false);

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

  if ([3]) {
    return <div role="alert">An unexpected error occurred.</div>;
  }

  return children;
}

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

AsetHasError

ChasError

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using the state variable name instead of setter to update state

Checking the setter function in the if condition instead of the state variable

We use useState to track error state with hasError and its setter setHasError. The effect listens for errors and sets the error state. The component renders fallback UI if hasError is true.