Всегда раздражает, когда ваше приложение выдает непредвиденные ошибки.
В общем, хорошим советом будет заблаговременно предусмотреть отлов наиболее распространенных ошибок. Однако могут возникнуть некоторые общие ошибки, которые не всегда можно предвидеть.
К счастью для нас, Remix поймает большинство таких ошибок и сможет вывести их на ближайшую границу ErrorBoundary, которую мы определим.
Создание корневой границы ошибки
С моей точки зрения, вы всегда хотите добавить корневую границу ошибок в ваш код, это самый верхний уровень, поэтому если ошибка будет брошена на верхнем уровне, этот уровень всегда сможет ее поймать.
Чтобы создать одну из таких корневых границ ошибок, откройте файл root.tsx.
Согласно документации, для корневой границы ошибки лучше всего отрисовать полный HTML, так как она будет монтироваться и размонтироваться при отрисовке этой ошибки.
Имея доступ к тегам <Meta />, <Links />, и <Script />, он сможет перерендерить.
Давайте добавим следующую функцию в этот корневой файл:
export function ErrorBoundary({ error }) {
return (
<html>
<head>
<title>Oh no!</title>
<Meta />
<Links />
</head>
<body className='m-4'>
<h1 className='text-2xl'>Something went wrong!</h1>
<p>{error.message}</p>
<Scripts />
</body>
</html>
);
}
Давайте попробуем и посмотрим, что произойдет; я добавил эту конкретную ошибку в app/routes/admin/posts/index.tsx.
export function loader() {
throw new Error('I am a failure!');
}
И если мы теперь откроем эту страницу, то получим следующую ошибку.
Это уже гораздо лучше, чем отсутствие пользовательской ошибки.
Недостатком является блокирование всей страницы, в то время как наша ошибка выбрасывается только в конце строки.
Добавление границ вложенных ошибок
И вот здесь Remix просто поражает воображение. Он поддерживает несколько границ ошибок!
При возникновении ошибки Remix начнет искать ближайшую границу ошибки для ее отображения.
В нашем случае мы можем добавить границу ошибки в тот же файл, в который мы ее бросили.
export function ErrorBoundary({ error }) {
return (
<div className='bg-red-100 border border-red-300 p-4'>
<h1 className='text-2xl'>Something went wrong!</h1>
<p>{error.message}</p>
</div>
);
}
Теперь обновите страницу и посмотрите, что произойдет.
Ого, ошибка отображается только в конкретном вложенном маршруте!
Остальные части нашего приложения по-прежнему работают, как и ожидалось.
Вы можете найти этот пример кода на GitHub.
Спасибо, что прочитали, и давайте подключаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.