Next.js: Loading и error UI — типичные gotcha на собеседовании

Question

Accepted Answer

`error.tsx` must `'use client'`, не ловит sibling layout, `global-error` own html/body, `notFound` vs throw, `reset()` scope, sync page без async — loading не сработает. ## Разбор - **`error.tsx` must be `'use client'`.** Most common mistake — error boundaries не Server Components. - **`error.tsx` не catches sibling `layout.tsx`.** Wraps *page*, не layout same level. Layout errors — boundary в *parent* segment. - **`global-error.tsx` own `` and ``** — replaces failed root layout; production only. - **`notFound()` vs `error`.** `not-found.tsx` expected 404; uncaught throw → `error.tsx` unexpected, wrong status/UX. - **`reset()` re-renders segment, not whole app** — stale props above boundary, reset alone не fix. - **Loading needs async boundary.** Sync page без awaited data — `loading.tsx` не trigger. ## Итог File conventions имеют precise scope; wrong placement error boundary — #1 production bug в loading/error UI.