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

Need a 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

Need a 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};
}

Need a 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

Need a hint?

Wrap UserProfile inside ErrorBoundary and pass user as a prop.