Client-side error boundaries in NextJS - Mini Project: Build & Apply

Client-side Error Boundaries in Next.js

📖 Scenario: You are building a simple Next.js app that shows user profiles. Sometimes, the user data might be missing or broken, causing errors in the UI. To keep the app friendly and stable, you want to catch these errors on the client side and show a nice message instead of a broken page.

🎯 Goal: Build a client-side error boundary component in Next.js that catches errors from its child components and displays a fallback UI with a friendly message. Then use this error boundary around a user profile component that might throw an error.

📋 What You'll Learn

Create a React functional component called ErrorBoundary that uses useState and useEffect to catch errors.

Add a state variable hasError to track if an error happened.

Use componentDidCatch equivalent logic with useEffect and error event listeners to detect errors.

Display a fallback UI with the text Something went wrong. when an error occurs.

Create a UserProfile component that throws an error if the user prop is null.

Wrap UserProfile inside ErrorBoundary in the main app component.

💡 Why This Matters

🌍 Real World

Client-side error boundaries help keep web apps stable and user-friendly by catching unexpected errors in UI components and showing fallback messages instead of broken pages.

💼 Career

Knowing how to implement error boundaries is important for frontend developers to build resilient React and Next.js applications that handle errors gracefully.

1

Create the UserProfile component

Create a React functional component called UserProfile that takes a user prop. If user is null, throw a new Error with the message 'User data is missing'. Otherwise, return a div that displays User: {user.name}.

NextJS

# Create the UserProfile component
# Your code here

Hint

Use a simple if check to throw an error when user is null.

2

Create the ErrorBoundary component with state

Create a React functional component called ErrorBoundary. Inside it, use useState to create a state variable called hasError initialized to false. Return a div that shows children for now.

NextJS

function UserProfile({ user }) {
  if (user === null) {
    throw new Error('User data is missing');
  }
  return User: {user.name};
}

# Create the ErrorBoundary component with useState
# Your code here

Hint

Use useState(false) to track errors and return children inside a div.

3

Add error catching logic in ErrorBoundary

Inside ErrorBoundary, use useEffect to add a window error event listener. When an error event happens, call setHasError(true). Also, clean up the listener in the return function of useEffect. If hasError is true, return a div with the text Something went wrong. instead of children.

NextJS

import React, { useState } from 'react';

function UserProfile({ user }) {
  if (user === null) {
    throw new Error('User data is missing');
  }
  return User: {user.name};
}

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);
  
  // Add useEffect to listen for errors
  // Your code here

  if (hasError) {
    return Something went wrong.;
  }
  return {children};
}

Hint

Use window.addEventListener('error', handleError) inside useEffect and clean it up on unmount.

4

Use ErrorBoundary to wrap UserProfile in main app

Create a default export React functional component called App. Inside it, create a variable user set to null. Return ErrorBoundary wrapping UserProfile with the user prop set to the user variable.

NextJS

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

function UserProfile({ user }) {
  if (user === null) {
    throw new Error('User data is missing');
  }
  return User: {user.name};
}

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

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

  if (hasError) {
    return Something went wrong.;
  }
  return {children};
}

# Create the App component that uses ErrorBoundary and UserProfile
# Your code here

Hint

Wrap UserProfile inside ErrorBoundary and pass user as a prop.

Practice

1. What is the main purpose of client-side error boundaries in Next.js?

easy

A. To catch errors in UI components and show a fallback UI instead of crashing the whole app

B. To improve server-side rendering speed

C. To handle database connection errors

D. To optimize image loading performance

Solution

1. Step 1: Understand error boundaries role

   Error boundaries catch errors in parts of the UI to prevent the entire app from crashing.

2. Step 2: Identify their main effect

   They show a fallback UI so users see a friendly message instead of a broken screen.

3. Final Answer:

   To catch errors in UI components and show a fallback UI instead of crashing the whole app -> Option A

4. Quick Check:

   Error boundaries catch UI errors = C [OK]

Hint: Error boundaries catch UI errors and show fallback UI [OK]

Common Mistakes:

• Confusing error boundaries with server-side features
• Thinking they handle backend or database errors
• Assuming they improve performance directly

2. Which of the following is the correct way to define a client-side error boundary component in Next.js using React hooks?

easy

A. function ErrorBoundary({ children }) { try { return children; } catch { return ; } }

B. class ErrorBoundary extends React.Component { render() { return this.props.children; } }

C. function ErrorBoundary() { return Error; }

D. const ErrorBoundary = () => { return children; }

Solution

1. Step 1: Identify hook-based error boundary pattern

   Client-side error boundaries in Next.js use try/catch inside functional components to catch errors during rendering.

2. Step 2: Check each option

   function ErrorBoundary({ children }) { try { return children; } catch { return ; } } uses try/catch inside a function component returning children or fallback UI, which is correct.

3. Final Answer:

   function ErrorBoundary({ children }) { try { return children; } catch { return <Fallback />; } } -> Option A

4. Quick Check:

   Try/catch in function component = A [OK]

Hint: Use try/catch inside functional component for client error boundaries [OK]

Common Mistakes:

• Using class components instead of functional components
• Not using try/catch to catch errors
• Returning children without error handling

3. Given this client-side error boundary component in Next.js:

function ErrorBoundary({ children }) {
  try {
    return children;
  } catch {
    return <div>Error occurred</div>;
  }
}

function BuggyComponent() {
  throw new Error('Bug!');
}

export default function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

What will be rendered on the page?

medium

A. output

B. Error occurred

C. Nothing is rendered

D. The app crashes with an uncaught error

Solution

1. Step 1: Understand error throwing in BuggyComponent

   BuggyComponent throws an error immediately when rendered.

2. Step 2: Check ErrorBoundary behavior

   ErrorBoundary tries to render children inside try block; error triggers catch block returning fallback UI <div>Error occurred</div>.

3. Final Answer:

   <div>Error occurred</div> -> Option B

4. Quick Check:

   Error caught, fallback shown = D [OK]

Hint: Error in child triggers catch, fallback UI renders [OK]

Common Mistakes:

• Expecting the app to crash instead of showing fallback
• Thinking children render despite error
• Confusing output with component name

4. Identify the problem in this client-side error boundary code snippet:

function ErrorBoundary({ children }) {
  try {
    return children;
  } catch (error) {
    console.log(error);
  }
}

export default function App() {
  return (
    <ErrorBoundary>
      <div>Hello</div>
    </ErrorBoundary>
  );
}

What issue will occur when an error happens inside children?

medium

A. The error is caught and fallback UI is shown

B. The error is logged and children still render

C. The app crashes due to syntax error

D. No fallback UI is returned, so the component renders nothing

Solution

1. Step 1: Analyze catch block behavior

   The catch block logs the error but does not return any UI.

2. Step 2: Understand React rendering rules

   Without a return in catch, the component returns undefined, rendering nothing on error.

3. Final Answer:

   No fallback UI is returned, so the component renders nothing -> Option D

4. Quick Check:

   Missing return in catch = renders nothing [OK]

Hint: Always return fallback UI in catch block [OK]

Common Mistakes:

• Forgetting to return fallback UI in catch
• Assuming logging error is enough
• Expecting children to render after error

5. You want to create a client-side error boundary in Next.js that catches errors in nested components and logs the error before showing fallback UI. Which approach correctly combines error catching, logging, and fallback rendering?

hard

A. function ErrorBoundary({ children }) {
try {
return children;
} catch (error) {
return Something went wrong.;
}
}

B. function ErrorBoundary({ children }) {
try {
return children;
} catch {
return Something went wrong.;
}
}

C. function ErrorBoundary({ children }) {
try {
return children;
} catch (error) {
console.error(error);
return Something went wrong.;
}
}

D. function ErrorBoundary({ children }) {
try {
return children;
} catch (error) {
console.log('Error caught');
}
}

Solution

1. Step 1: Check error catching and logging

   function ErrorBoundary({ children }) { try { return children; } catch (error) { console.error(error); return
   Something went wrong.; } } catches error, logs it with console.error, then returns fallback UI.

2. Step 2: Verify fallback UI return

   function ErrorBoundary({ children }) { try { return children; } catch (error) { console.error(error); return
   Something went wrong.
   ; } } returns fallback UI after logging, ensuring user sees message and error is logged.

3. Final Answer:

   function ErrorBoundary({ children }) { try { return children; } catch (error) { console.error(error); return <div>Something went wrong.</div>; } } -> Option C

4. Quick Check:

   Error caught, logged, fallback returned = A [OK]

Hint: Catch error, log it, then return fallback UI [OK]

Common Mistakes:

• Not logging the error before fallback
• Not returning fallback UI after catching error
• Logging without returning fallback UI