Як працює global-error.tsx в Next.js?

Next.jsMiddle~1 хв читання

Що таке `global-error.tsx`

У Next.js файл app/global-error.tsx:

ловить помилки рендеру, data fetching, server components
працює на рівні всього застосунку
перекриває будь-який layout
використовується, коли зламалося все

Ієрархія помилок (дуже важливо)

Next.js шукає error boundary знизу вгору:

segment/error.tsx        ← пріоритет №1
segment/layout.tsx
...
app/global-error.tsx     ← останній fallback

Якщо немає відповідного error.tsx, використовується global-error.tsx.

Де він лежить

txt

app/
 ├─ layout.tsx
 ├─ global-error.tsx   ← лише тут
 └─ page.tsx

Лише в корені app/ У сегментах global-error.tsx не працює.

Мінімальний приклад

tsx

"use client";

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html>
      <body>
        <h1>Щось пішло геть не так</h1>
        <p>{error.message}</p>
        <button onClick={() => reset()}>
          Спробувати ще раз
        </button>
      </body>
    </html>
  );
}

Обов'язкові моменти

use client - обов'язково
має повертати <html> та <body>
приймає:
- error - об'єкт помилки
- reset() - повторний рендер сегмента

Що робить `reset()`

повторно рендерить застосунок
повторює fetch, server components
корисно для тимчасових помилок (мережа, API)

Які помилки ловить

Ловить: помилки в Server Components
Ловить: помилки в Client Components
Ловить: помилки в fetch()
Ловить: помилки в layout/page/template
Не ловить: помилки в event handlers (onClick)
Не ловить: помилки поза React lifecycle

(для кліків - try/catch)

`error.tsx` vs `global-error.tsx`

	`error.tsx`	`global-error.tsx`
Область	сегмент	все застосунок
Частота	часто	дуже рідко
UI	локальний	аварійний
Перекриває layout	Ні	Так

Коли ПОТРІБЕН `global-error.tsx`

впала база даних
зламався auth middleware
помилка в root layout
неочікуваний runtime crash
production fallback

Коли НЕ потрібен

помилки конкретної сторінки
валідація форм
бізнес-помилки (404, forbidden)
UI-помилки -> error.tsx

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.