Пост Обработка ошибок в React Server Components

Обработка ошибок в React Server Components В серверных компонентах React могут возникать ошибки. Для их обработки можно использовать ErrorBoundary из react-error-boundary, который поддерживает восстановление ошибки и повторную попытку рендеринга. С помощью RSC и react-error-boundary можно реализовать повторный рендеринг. Пример компонента ErrorFallback, который выполняет повторный рендеринг по клику на кнопку: 'use client' import { startTransition, useState } from 'react' import { useRouter } from 'next/navigation' export default function ErrorFallback({ error, resetErrorBoundary, }: { error: Error resetErrorBoundary: () => void }) { const router = useRouter() // Стейт кнопки сброса const [isResetting, setIsResetting] = useState(false) function retry() { setIsResetting(true) startTransition(() => { router.refresh() resetErrorBoundary() setIsResetting(false) }) } return ( <button onClick={() => retry()}> {isResetting ? <Spinner /> : null} Retry </button> ) } Как видно из примера, используется router.refresh() для повторного рендера компонента, в котором произошла ошибка. На самом деле ре-рендерится вся страница, но пользователю кажется, что ре-рендерится только компонент с ошибкой. Т.к. router.refresh() долгая операция, которая не возвращает Promise, то для отслеживания выполнения она вызывается внутри startTransition. https://edspencer.net/2024/7/16/errors-and-retry-with-react-server-components