Обработка ошибок

Загрузки дают сбой. База данных недоступна, запись отсутствует, что-то выбрасывает исключение. Без плана один неудачный await утянет за собой весь экран.

error.jsx — это зеркальное отражение loading.jsx: та же идея, противоположный результат. Поместите его рядом со страницей, и он перехватит всё, что эта страница выбросит во время рендеринга:

app/
    menu/
        page.jsx
        loading.jsx    while it works
        error.jsx      when it doesn't

В отличие от loading.jsx, у него есть одно жесткое требование:

'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Couldn't load the menu</h2>
            <button onClick={reset}>Try again</button>
        </div>
    );
}

error.jsx должен быть клиентским компонентом. Причина кроется прямо в JSX: onClick. Кнопка повторной попытки — это интерактивность, а интерактивности нужен компонент, который отправляется в браузер. Пропустите 'use client' — и вы получите ошибку обработчика событий из предыдущей главы на той самой странице, задачей которой была обработка ошибок.

Он принимает два пропса:

• error: объект Error, который был выброшен, чтобы вы могли записать его в лог
• reset: функция, которая повторно рендерит сбойную секцию. Вызовите её, и page попытается again

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

Как и другие специальные файлы, error.jsx охватывает свою папку и все вложенные в нее файлы и папки, поэтому один файл рядом с корнем служит защитной сеткой для целого раздела сайта.