Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як працює global-error.tsx в Next.js?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке `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`

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати319 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.