Обработка ошибок загрузки

В библиотеке Radix UI ключевой особенностью является предоставление низкоуровневых компонентов с управляемым состоянием, что позволяет полностью контролировать поведение интерфейса. Это особенно важно при работе с компонентами, которые загружают данные асинхронно, такими как Select, DropdownMenu, Popover и Dialog, где могут возникать ошибки загрузки данных или состояния.

Использование состояния загрузки и ошибок

Большинство компонентов Radix UI не включают встроенную обработку ошибок данных, поэтому необходимо использовать внешнее состояние для отслеживания процесса загрузки и возможных ошибок. Стандартная практика заключается в использовании React state или zustand, Redux для управления асинхронными операциями:

import React, { useState, useEffect } from 'react';
import * as Sel ect from '@radix-ui/react-select';

function AsyncSelect({ fetchData }) {
  const [options, setOptions] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchData()
      .then(data => setOptions(data))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, [fetchData]);

  return (
    <Sel ect.Root>
      <Sel ect.Trigger>
        <Select.Value placeholder="Выберите элемент" />
      </Select.Trigger>
      <Select.Content>
        {loading && <div>Загрузка...</div>}
        {error && <div style={{ color: 'red' }}>Ошибка: {error.message}</div>}
        {!loading && !error && options.map(option => (
          <Select.Item key={option.id} value={option.value}>
            <Select.ItemText>{option.label}</Select.ItemText>
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  );
}

Ключевые моменты:

  • loading показывает пользователю, что данные загружаются.
  • error предоставляет возможность отобразить пользовательский интерфейс с информацией о проблеме.
  • finally гарантирует, что индикатор загрузки исчезнет, независимо от результата.

Комбинирование с Suspense и Error Boundary

Для более крупного приложения удобно интегрировать Radix UI с React Suspense и Error Boundary. Это позволяет централизованно обрабатывать ошибки загрузки данных и предоставлять fallback интерфейсы без дублирования кода:

import React, { Suspense } fr om 'react';
import AsyncSelect fr om './AsyncSelect';

function SelectWrapper() {
  return (
    <Suspense fallback={<div>Загрузка компонента...</div>}>
      <ErrorBoundary fallback={<div>Не удалось загрузить данные</div>}>
        <AsyncSelect fetchData={fetchOptions} />
      </ErrorBoundary>
    </Suspense>
  );
}

Особенности интеграции:

  • Suspense блокирует рендер до завершения асинхронной загрузки.
  • ErrorBoundary позволяет перехватывать исключения внутри дочерних компонентов Radix UI.
  • Совмещение этих подходов уменьшает вероятность неконтролируемых ошибок в UI.

Обработка ошибок в компонентах Popover и Dialog

Для динамического контента в Popover или Dialog важно учитывать, что компонент может быть открыт до завершения асинхронной операции. Рекомендуется показывать placeholder или индикатор загрузки внутри содержимого:

import * as Dialog fr om '@radix-ui/react-dialog';

function AsyncDialog({ fetchDetails, isOpen }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (isOpen) {
      setLoading(true);
      fetchDetails()
        .then(setData)
        .catch(setError)
        .finally(() => setLoading(false));
    }
  }, [isOpen, fetchDetails]);

  return (
    <Dialog.Root open={isOpen}>
      <Dialog.Trigger>Открыть диалог</Dialog.Trigger>
      <Dialog.Content>
        {loading && <div>Загрузка...</div>}
        {error && <div style={{ color: 'red' }}>Ошибка: {error.message}</div>}
        {data && <div>{data.content}</div>}
      </Dialog.Content>
    </Dialog.Root>
  );
}

Особенности подхода:

  • Запрос данных происходит только при открытии диалога (isOpen).
  • Ошибки отображаются прямо в контенте, не ломая остальной интерфейс.
  • Можно расширить функционал с кнопкой «Повторить запрос» для улучшения UX.

Логирование и аналитика ошибок

Для производственного приложения важно не только отображать ошибки пользователю, но и логировать их в Sentry, LogRocket или другой сервис мониторинга. Radix UI не предоставляет встроенной аналитики, поэтому необходимо вручную передавать исключения в логгер:

.catch(err => {
  setError(err);
  Sentry.captureException(err);
});

Выводы по обработке ошибок:

  • Radix UI фокусируется на управляемом состоянии компонентов, а не на логике загрузки данных.
  • Управление асинхронными операциями осуществляется через внешние стейты React.
  • Обработка ошибок должна быть интегрирована на уровне контента, с визуальной индикацией и централизованным логированием.
  • Использование Suspense и Error Boundary повышает стабильность интерфейса при неожиданных сбоях.

Эффективная обработка ошибок загрузки в Radix UI требует сочетания правильного управления состоянием, визуальных индикаторов и внешних инструментов мониторинга для создания устойчивого и предсказуемого пользовательского интерфейса.

Оглавление