Why error boundaries matter in NextJS

Introduction

Error boundaries help your app stay working even when some parts have problems. They catch errors in components so the whole app doesn't crash.

When you want to show a friendly message instead of a broken screen if a part of your app fails.

When you want to log errors from components to fix bugs later.

When you want to keep other parts of your app usable even if one part crashes.

When you want to improve user experience by avoiding full app crashes.

When you want to isolate errors to specific parts of your UI.

Syntax

NextJS

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // reset the state of your app here
      }}
    >
      <YourComponent />
    </ErrorBoundary>
  );
}

Error boundaries catch errors in their child components during rendering, lifecycle methods, and constructors.

They do not catch errors inside event handlers.

Examples

Basic error boundary wrapping a component with a simple fallback UI.

NextJS

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error }) {
  return <div>Error: {error.message}</div>;
}

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <MyComponent />
    </ErrorBoundary>
  );
}

Error boundary with a reset handler to recover from errors.

NextJS

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // reset app state
      }}
    >
      <MyComponent />
    </ErrorBoundary>
  );
}

Sample Program

This example shows a counter button that crashes when it reaches 3. The error boundary catches the crash and shows a friendly message with a retry button.

NextJS

import React, { useState } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function BuggyCounter() {
  const [count, setCount] = useState(0);
  if (count === 3) {
    throw new Error('I crashed at 3!');
  }
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Oops! Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

export default function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => {
        // reset logic if needed
      }}
    >
      <BuggyCounter />
    </ErrorBoundary>
  );
}

Important Notes

Use error boundaries to prevent your whole app from crashing due to one component's error.

Always provide a fallback UI so users know something went wrong.

Resetting error boundaries helps users recover without reloading the page.

Summary

Error boundaries catch errors in parts of your app to keep it running.

They improve user experience by showing friendly messages instead of broken screens.

Use them to isolate errors and allow recovery with reset options.