Границы ошибок

Если загрузчик, действие или компонент выбросили ошибку, фреймворк не показывает белый экран. Он ищет ближайший модуль маршрута с экспортом ErrorBoundary (граница ошибок) и отрисовывает его вместо страницы. Макет и шапка над ним при этом остаются на месте.

Корневая граница

В шаблоне проекта граница уже есть в app/root.tsx — она ловит всё, что не поймали ниже. Если её нет, добавьте похожую:

// app/root.tsx
import { isRouteErrorResponse } from "react-router";
import type { Route } from "./+types/root";
 
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  if (isRouteErrorResponse(error)) {
    return <h1>{error.status} {error.statusText}</h1>;
  }
  return <h1>Что-то пошло не так</h1>;
}

Откройте /abc — несуществующий адрес. Появится «404 Not Found»: фреймворк сам создаёт такой ответ, когда ни один маршрут не подошёл.

Граница для статьи

Загрузчик статьи из урока про загрузчики выбрасывает ответ 404. Добавьте в app/routes/post.tsx свою границу:

// app/routes/post.tsx
import { Link, isRouteErrorResponse } from "react-router";
 
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  if (isRouteErrorResponse(error) && error.status === 404) {
    return (
      <>
        <h1>Статья не найдена</h1>
        <Link to="/">К списку статей</Link>
      </>
    );
  }
  throw error;
}

На /posts/99 в макете блога появится «Статья не найдена» со ссылкой. Другие ошибки граница выбрасывает дальше, и их покажет корневая.

Два вида ошибок

Вид	Как возникает	Как распознать
Ожидаемая	`throw new Response(...)` или `throw data(...)`	`isRouteErrorResponse(error)` истинно, есть `status` и `data`
Непредвиденная	Опечатка в коде, упала база	`error instanceof Error`, есть `message`

Ожидаемые ошибки вы выбрасываете сами, чтобы прервать загрузку: «не найдено», «нет доступа». Текст из new Response("Статья не найдена", ...) доступен как error.data.

Выбросить с данными

Вместо Response можно выбросить data с любым объектом:

// app/routes/post.tsx
import { data } from "react-router";
 
throw data({ postId: params.postId }, { status: 404 });

В границе error.data.postId покажет, какую статью искали.

Частая ошибка

Выводить в границе error.message и error.stack посетителям. В режиме разработки это удобно, но в продакшене текст ошибки может раскрыть устройство приложения. Шаблонная корневая граница показывает стек только при import.meta.env.DEV; придерживайтесь того же правила в своих границах.

Спасибо, что читаете!