Why error boundaries matter in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an error boundary component in Next.js.

NextJS

import React from 'react';

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

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

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

  return children;
}

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

AsetHasError

BhandleError

Cchildren

DhasError

Attempts:

3 left

💡 Hint

Common Mistakes

Removing a different function than the one added causes the listener to stay active.

Trying to remove the listener with a variable that is not a function.

The event listener must remove the exact same function it added. Here, handleError is the function to remove.

2fill in blank

medium

Complete the code to catch errors in a React component using Next.js error boundaries.

NextJS

import React from '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>Oops! Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

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

AgetDerivedStateFromError

BcomponentDidCatch

CcomponentWillUnmount

DshouldComponentUpdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using lifecycle methods that are not static to update state.

Confusing error boundary methods with normal component lifecycle methods.

getDerivedStateFromError is a static method used to update state when an error is caught in a React error boundary.

3fill in blank

hard

Fix the error in the Next.js error boundary component to properly log errors.

NextJS

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

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

Ainfo

Berror

Cerror, info

Dthis.error

Attempts:

3 left

💡 Hint

Common Mistakes

Logging only one argument misses important error details.

Trying to access error as a property of this.

The componentDidCatch method receives two arguments: error and info. To log both, pass them as arguments to console.log.

4fill in blank

hard

Fill both blanks to create a functional error boundary using React hooks in Next.js.

NextJS

import React from 'react';

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

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

  if (hasError) {
    return <div>Oops! An error occurred.</div>;
  }

  return children;
}

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

AhandleError

BsetHasError

ChasError

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using different functions for adding and removing listeners causes memory leaks.

Passing state variables instead of functions to event listeners.

The same function handleError must be used for both adding and removing the event listener to properly manage the error event.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that filters errors by severity in Next.js error logging.

NextJS

const errorSummary = {
  [1]: [2] for (const [key, value] of Object.entries(errors))
  if (value.severity [3] 3)
};

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

Akey

Bvalue

C>=

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong comparison operator in the filter condition.

Swapping key and value in the comprehension.

This code creates an object with keys and values from errors where the severity is 3 or higher.