Why error boundaries matter in NextJS - The Real Reasons

The Big Idea

What if one small error could crash your whole app--and how can you stop that from happening?

The Scenario

Imagine building a web app where a tiny mistake in one part crashes the entire page, leaving users staring at a blank screen or a confusing error message.

The Problem

Without error boundaries, a single error in your app breaks everything, making it hard to find the problem and frustrating users who lose all functionality at once.

The Solution

Error boundaries catch errors in parts of your app, showing a friendly message instead of crashing everything, so the rest of your app keeps working smoothly.

Before vs After

✗ Before

function App() {
  return <ComponentThatMightCrash />;
}

✓ After

import React from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

function App() {
  return <ErrorBoundary><ComponentThatMightCrash /></ErrorBoundary>;
}

What It Enables

Error boundaries let your app stay alive and user-friendly even when unexpected errors happen.

Real Life Example

Think of an online store where a product detail page crashes but the rest of the site, like the cart and navigation, still works perfectly.

Key Takeaways

Errors can break entire apps if not handled.

Error boundaries catch errors in parts of the UI.

This keeps apps stable and improves user experience.