Границы ошибок в Next.js App Router

Большинство приложений Next.js работают хорошо, когда всё идет по плану. Но они дают сбой, когда что-то идет не так. Высококачественные приложения используют границы ошибок (error boundaries), чтобы изящно обрабатывать такие сбои.

App Router использует иную модель, чем Pages Router. Он опирается на React Error Boundaries. Вы используете файлы error.js, чтобы перехватывать ошибки на любом уровне вашего маршрута.

Как это работает:

• Ошибки остаются в пределах ближайшей границы error.js. • Ошибки не передаются глобальному обработчику, если вы сами этого не захотите. • Вы можете показывать разные экраны ошибок для разных частей вашего приложения.

Правила для файла error.js:

  • Он должен быть Client Component. Используйте 'use client' в самом верху.
  • Он перехватывает ошибки в этом сегменте и во всех его дочерних элементах.
  • Вы получаете функцию reset для повторной попытки неудачного рендеринга.

Используйте функцию reset для временных проблем, таких как разрывы соединения. Не используйте её для постоянных ошибок.

Используйте global-error.js для корневого layout. Стандартный error.js не перехватывает ошибки в корневом layout.js. global-error.js — это ваш последний рубеж. Он заменяет корневой layout, поэтому ему требуются собственные теги и .

Управление различными типами ошибок:

  • Используйте notFound() для отсутствующих данных. Это активирует not-found.js.
  • Используйте throw Error() для непредвиденных сбоев. Это активирует error.js.

Такое разделение позволяет поддерживать чистоту приложения. Пользователь, ищущий несуществующий пост в блоге, увидит страницу 404. Пользователь, столкнувшийся с падением базы данных, увидит сообщение об ошибке.

Я использую этот паттерн в генераторе изображений на базе ИИ. Процесс включает в себя множество этапов, таких как API-вызовы и загрузка файлов. Если один из этапов дает сбой, граница ошибки показывает конкретное сообщение. Кнопка reset позволяет пользователю попробовать еще раз, не теряя свой промпт.

Хорошая структура выглядит следующим образом:

• global-error.js: Последняя страховочная сетка. • error.js: Обрабатывает ошибки корневого уровня. • dashboard/error.js: Обрабатывает ошибки внутри панели управления (dashboard). • auth/error.js: Обрабатывает ошибки входа или сессии.

Такой подход предотвращает поломку всего сайта из-за одной небольшой ошибки.

Источник: https://dev.to/aon_infotech_3a1b6ff525fc/error-boundaries-in-nextjs-app-router-handling-failures-gracefully-3mif