Global-error.tsx for root errors in NextJS

Introduction

Global-error.tsx helps catch and show errors that happen anywhere in your Next.js app. It stops the app from crashing and shows a friendly message instead.

When you want to show a simple error page if something breaks in your app.

When you want to catch unexpected errors from any part of your app.

When you want to keep your app running smoothly even if some code fails.

When you want to give users a clear message instead of a blank screen.

When you want to log or track errors globally in your app.

Syntax

NextJS

'use client';

export default function GlobalError({ error, reset }) {
  return (
    <div>
      <h1>Something went wrong!</h1>
      <pre>{error.message}</pre>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

The component receives error and reset props automatically.

The reset function lets users retry after an error.

Examples

A simple error UI with a reload button.

NextJS

'use client';

export default function GlobalError({ error, reset }) {
  return (
    <div>
      <h2>Oops! An error happened.</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Reload</button>
    </div>
  )
}

Styled error message inside a main tag for better semantics.

NextJS

'use client';

export default function GlobalError({ error, reset }) {
  return (
    <main style={{ padding: '2rem', fontFamily: 'Arial' }}>
      <h1>Error!</h1>
      <p>{error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </main>
  )
}

Sample Program

This is a complete GlobalError component for Next.js that shows a red error background, the error message, and a button to retry. It uses semantic HTML and accessible button labeling.

NextJS

'use client';
import React from 'react';

export default function GlobalError({ error, reset }) {
  return (
    <main style={{ fontFamily: 'Arial, sans-serif', padding: '2rem', backgroundColor: '#f8d7da', color: '#721c24' }}>
      <h1>Oops! Something went wrong.</h1>
      <pre style={{ whiteSpace: 'pre-wrap' }}>{error.message}</pre>
      <button
        style={{
          marginTop: '1rem',
          padding: '0.5rem 1rem',
          backgroundColor: '#f5c6cb',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
        onClick={() => reset()}
        aria-label="Try again button"
      >
        Try again
      </button>
    </main>
  );
}

Important Notes

Always include aria-label on buttons for accessibility.

Use semantic HTML tags like <main>, <h1>, and <button> for better structure.

The reset function reloads the part of the app that failed, so users can try again without a full page refresh.

Summary

Global-error.tsx catches errors anywhere in your Next.js app and shows a friendly message.

It receives error and reset props to display info and let users retry.

Use semantic HTML and accessibility features for a better user experience.