Why error boundaries matter in NextJS - See It in Action

Why Error Boundaries Matter in Next.js

📖 Scenario: Imagine you are building a blog website using Next.js. Sometimes, parts of your page might break because of unexpected errors in components. You want to make sure that if one part breaks, the rest of the page still works and shows a friendly message instead of a blank screen.

🎯 Goal: Build a simple Next.js component that uses an error boundary to catch errors in a child component and display a fallback UI. This helps keep the app running smoothly even if some parts fail.

📋 What You'll Learn

Create a React error boundary component called ErrorBoundary using a class component.

Add a state variable hasError initialized to false in ErrorBoundary.

Implement the static getDerivedStateFromError(error) method to update hasError to true when an error occurs.

Render a fallback UI with a message Something went wrong. when hasError is true.

Use the ErrorBoundary component to wrap a child component called BuggyComponent that throws an error.

Ensure the rest of the page content outside BuggyComponent still renders normally.

💡 Why This Matters

🌍 Real World

Web apps often have parts that can fail due to bugs or network issues. Error boundaries help keep the app usable by catching these errors and showing fallback content.

💼 Career

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

1

Create the BuggyComponent that throws an error

Create a functional component called BuggyComponent that throws an error with the message "I crashed!" when rendered.

NextJS

# Your code here
// Create BuggyComponent that throws an error

Need a hint?

This component simulates a crash by throwing an error when it tries to render.

2

Create the ErrorBoundary class component with state

Create a class component called ErrorBoundary that extends React.Component. Add a constructor that initializes this.state = { hasError: false }.

NextJS

function BuggyComponent() {
  throw new Error("I crashed!");
}

// Your code here
// Create ErrorBoundary class component with state hasError false

Need a hint?

The constructor sets up the initial state to track if an error happened.

3

Add error handling method and fallback UI

Inside ErrorBoundary, add the static method getDerivedStateFromError(error) that returns { hasError: true }. Also, add a render() method that returns <h2>Something went wrong.</h2> if this.state.hasError is true, otherwise renders this.props.children.

NextJS

function BuggyComponent() {
  throw new Error("I crashed!");
}

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  // Your code here
  // Add getDerivedStateFromError and render methods
}

Need a hint?

This method updates the state when an error happens. The render method shows a fallback message or the child components.

4

Use ErrorBoundary to wrap BuggyComponent in a Next.js page

Create a default export functional component called Page that returns a fragment with a heading <h1>My Blog</h1>, then uses <ErrorBoundary> to wrap <BuggyComponent />, and finally a paragraph <p>Welcome to the blog!</p> outside the error boundary.

NextJS

function BuggyComponent() {
  throw new Error("I crashed!");
}

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return Something went wrong.;
    }
    return this.props.children;
  }
}

// Your code here
// Create Page component that uses ErrorBoundary to wrap BuggyComponent

Need a hint?

This final step shows how to use the error boundary to protect the buggy component and keep the rest of the page visible.