ErrorPage

Полноэкранная error-страница. Тип ошибки (errorType) задаёт заголовок, код статуса, текст и набор действий; справа — декоративная иллюстрация, скрытая на mobile.

Когда использовать

• Нужно показать пользователю системную ошибку или недоступность страницы целым экраном.
• Требуется типовой набор: заголовок с кодом статуса, поясняющий текст, кнопка действия и ссылки на главную/назад.
• Нужна точка входа в поддержку (onSupportCenterClick).

Когда не нужен:

• Локальная ошибка внутри блока или формы:
  • используйте Alert или inline-сообщение.
• Загрузочное/пустое состояние без ошибки — это Skeleton / empty-state, а не ErrorPage.

Анатомия

Размер и брейкпоинты

Раскладка переключается по ширине самого компонента, а не окна: ErrorPage встраивают и на весь экран, и рядом с сайдбаром, и в модальное окно. В узком контейнере он уходит в одну колонку и прячет иллюстрацию независимо от того, насколько широко окно.

• Шире 1023px — две колонки: контент слева, иллюстрация справа внизу.
• 768–1023px — одна колонка, иллюстрация под контентом.
• До 767px — одна колонка, иллюстрация скрыта, кнопки на всю ширину и прижаты к низу.

Ширину задаёт родитель. В нерастянутом flex-элементе или в inline-block компонент схлопнется по контенту — дайте ему явную ширину, width: 100% или растяжение (flex: 1, align-self: stretch).

Error type (default FrontendError)

Главная ось — errorType. Определяет заголовок, код статуса, текст и какие действия видны:

• FrontendError — непредвиденная ошибка. Кнопка «Обновить», ссылки «На главную» и «Назад».
• PageUnavailable — сервис недоступен. Кнопка «На главную», ссылка «Назад».
• PageNotFound — страница не найдена (404). Кнопка «На главную».
• Offline — нет соединения. Кнопка «Обновить».
• Redirect — ссылка устарела. Кнопка «Перейти» на mainPageUrl.
• Custom — контент берётся из custom.

Logo variant (default None)

Логотип над заголовком (logoVariant):

• Cloud — фирменный логотип cloud.ru.
• Custom — свой узел через проп logo.
• None — без логотипа.

Custom

При errorType='Custom' объект custom задаёт:

• title — заголовок.
• description — текст под заголовком.
• statusCode — код статуса в теге у заголовка.
• mainButton — label / href / onClick / icon главной кнопки.
• showMainPageLink / showBackLink — видимость ссылок.
• actionWrapperClassName — класс на контейнере действий.

Установка

pnpm add @cloud-ru/ds-uikit-product-error-pages

import { ErrorPage } from '@cloud-ru/ds-uikit-product-error-pages'
import '@cloud-ru/ds-uikit-product-error-pages/style.css'

Примеры использования

Страница не найдена

import { ERROR_TYPE, ErrorPage, LOGO_VARIANT } from '@cloud-ru/ds-uikit-product-error-pages';

export function NotFound() {
  return (
    <ErrorPage
      errorType={ERROR_TYPE.PageNotFound}
      logoVariant={LOGO_VARIANT.Cloud}
      mainPageUrl='/'
      onSupportCenterClick={() => window.open('https://cloud.ru/support', '_blank')}
    />
  );
}

Нет соединения

import { ERROR_TYPE, ErrorPage, LOGO_VARIANT } from '@cloud-ru/ds-uikit-product-error-pages';

export function Offline() {
  return <ErrorPage errorType={ERROR_TYPE.Offline} logoVariant={LOGO_VARIANT.Cloud} />;
}

Кастомный контент

import { ERROR_TYPE, ErrorPage, LOGO_VARIANT } from '@cloud-ru/ds-uikit-product-error-pages';

export function Custom() {
  return (
    <ErrorPage
      errorType={ERROR_TYPE.Custom}
      logoVariant={LOGO_VARIANT.Custom}
      logo={<span>ACME</span>}
      mainPageUrl='/dashboard'
      custom={{
        title: 'Quota exceeded',
        description: 'Your project reached its resource limit. Upgrade the plan to continue.',
        statusCode: 429,
        mainButton: { label: 'Upgrade plan', href: '/billing' },
        showMainPageLink: true,
        showBackLink: true,
      }}
    />
  );
}

Props

Types

ErrorPageProps

ErrorPageCustomConfig

Storybook

Figma