Client-side error boundaries in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook needed for error boundaries.

NextJS

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

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

AuseErrorHandler

BuseEffect

CuseState

DuseErrorBoundary

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState or useEffect instead of the error handling hook.

Trying to import a hook that doesn't exist in React.

The useErrorHandler hook from Next.js is used to handle errors in client-side error boundaries.

2fill in blank

medium

Complete the code to catch errors in a client component using the error boundary hook.

NextJS

const errorHandler = [1]();

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

AuseState

BuseCallback

CuseEffect

DuseErrorHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState or useEffect which do not handle errors.

Trying to call a hook that doesn't return an error handler function.

The useErrorHandler hook returns a function to catch and handle errors in client components.

3fill in blank

hard

Fix the error in the code to properly throw an error inside a client component.

NextJS

if (hasError) {
  [1](new Error('Something went wrong'));
}

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

Areturn

Bthrow

CerrorHandler

Dconsole.error

Attempts:

3 left

💡 Hint

Common Mistakes

Using throw directly inside the component instead of calling the handler.

Using console.error which only logs but does not trigger the boundary.

Inside a client component using error boundaries, you call the errorHandler function with the error to trigger the boundary.

4fill in blank

hard

Fill both blanks to create a client component that uses error boundaries correctly.

NextJS

"use client";
import { [1] } from 'react-error-boundary';

export default function ErrorBoundaryWrapper({ children }) {
  return <[2] fallback={<p>Oops! An error occurred.</p>}>{children}</[2]>;
}

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

AErrorBoundary

BuseErrorHandler

CErrorBoundaryWrapper

DErrorBoundaryComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong hook or component.

Using different names for import and JSX tag.

The ErrorBoundary component from react-error-boundary wraps children and shows a fallback UI on error.

5fill in blank

hard

Fill all three blanks to handle an error and reset the error boundary on button click.

NextJS

"use client";
import { useErrorHandler, ErrorBoundary } from 'react-error-boundary';
import { useState } from 'react';

function BuggyComponent() {
  const handleError = [1]();
  const [hasError, setHasError] = useState(false);

  if (hasError) {
    [2](new Error('Bug detected'));
  }

  return <button onClick={() => setHasError(true)}>Cause Error</button>;
}

export default function App() {
  return (
    <ErrorBoundary fallbackRender={({ resetErrorBoundary }) => (
      <div>
        <p>There was an error.</p>
        <button onClick=[3]>Try again</button>
      </div>
    )}>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

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

AuseErrorHandler

BhandleError

C() => resetErrorBoundary()

DresetErrorBoundary

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the error handler incorrectly.

Passing resetErrorBoundary directly instead of a function.

Not using the hook to get the error handler.

Use useErrorHandler to get the error handler function, call it as handleError, and reset the boundary with a callback () => resetErrorBoundary().