Страница ошибки в NextJS

Если в серверном компоненте или при рендере дочерних элементов возникает непойманная ошибка, NextJS ищет рядом файл error.jsx и показывает его вместо сломанной страницы. Это не страница 404 для несуществующего роута - отдельный сценарий для сбоев при работе.

Компонент ошибки должен быть клиентским: в начале файла нужна директива 'use client', потому что кнопка повтора использует обработчики на клиенте. NextJS передает пропсы error и reset.

Давайте создадим error.jsx для сегмента пользователей:

'use client';

export default function UsersError({ error, reset }) {
	return (
		<div>
			<p>{error.message}</p>
			<button type="button" onClick={() => reset()}>
				try again
			</button>
		</div>
	);
}

Чтобы эта страница появилась на экране, в page.jsx временно бросим ошибку:

export default async function Users() {
	throw new Error('failed to load users');
}

Сделайте error.jsx для раздела /reports: выведите текст ошибки и кнопку повтора на английском.

Сымитируйте сбой на странице одного товара и убедитесь, что вместо нее открывается страница ошибки этого раздела.