Заметки про React: “Обработка ошибок в React Server Components В серверных компонентах Rea…”

Обработка ошибок в 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