error.js

Файл error определяет границу (boundary) для отображения UI ошибок в сегменте маршрута.

Он полезен для перехвата неожиданных ошибок в серверных и клиентских компонентах (Server Components и Client Components) и отображения резервного UI.

'use client' // Компоненты ошибок должны быть клиентскими

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Логирование ошибки в сервис отчетов
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>Что-то пошло не так!</h2>
      <button
        onClick={
          // Попытка восстановления путем повторного рендеринга сегмента
          () => reset()
        }
      >
        Попробовать снова
      </button>
    </div>
  )
}

'use client' // Компоненты ошибок должны быть клиентскими

import { useEffect } from 'react'

export default function Error({ error, reset }) {
  useEffect(() => {
    // Логирование ошибки в сервис отчетов
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>Что-то пошло не так!</h2>
      <button
        onClick={
          // Попытка восстановления путем повторного рендеринга сегмента
          () => reset()
        }
      >
        Попробовать снова
      </button>
    </div>
  )
}

Пропсы (Props)

`error`

Экземпляр объекта Error, переданный в клиентский компонент error.js.

`error.message`

Сообщение об ошибке.

Для ошибок из клиентских компонентов (Client Components) это будет оригинальное сообщение ошибки.
Для ошибок из серверных компонентов (Server Components) это будет общее сообщение об ошибке, чтобы избежать утечки чувствительных данных. error.digest можно использовать для сопоставления с соответствующей ошибкой в серверных логах.

`error.digest`

Автоматически сгенерированный хэш ошибки, выброшенной в серверном компоненте (Server Component). Может использоваться для сопоставления с соответствующей ошибкой в серверных логах.

Функция для сброса границы ошибки (error boundary). При выполнении функция попытается перерендерить содержимое границы ошибки. В случае успеха компонент ошибки будет заменен результатом повторного рендеринга.

Может использоваться для предложения пользователю попытаться восстановиться после ошибки.

Важно знать:

Границы error.js должны быть клиентскими компонентами (Client Components).

В production-сборках детали ошибок из серверных компонентов будут удалены, чтобы избежать утечки чувствительной информации.

Граница error.js не обрабатывает ошибки, выброшенные в компоненте layout.js того же сегмента, потому что граница ошибки вложена внутрь этого компонента layout.

Для обработки ошибок конкретного layout разместите файл error.js в родительском сегменте layout.

Для обработки ошибок в корневом layout или шаблоне используйте вариант error.js под названием app/global-error.js.

`global-error.js`

Для обработки ошибок в корневом layout.js используйте вариант error.js под названием app/global-error.js, размещенный в корневой директории app.

'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>Что-то пошло не так!</h2>
        <button onClick={() => reset()}>Попробовать снова</button>
      </body>
    </html>
  )
}

'use client'

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>Что-то пошло не так!</h2>
        <button onClick={() => reset()}>Попробовать снова</button>
      </body>
    </html>
  )
}

Важно знать:

global-error.js заменяет корневой layout.js при активации и поэтому должен определять собственные теги <html> и <body>.

При разработке UI ошибок может быть полезно использовать React Developer Tools для ручного переключения границ ошибок (Error boundaries).

not-found.js

Файл not-found используется для отображения UI при вызове функции notFound() в сегменте маршрута.

История версий

Версия	Изменения
`v13.1.0`	Добавлен `global-error`.
`v13.0.0`	Добавлен `error`.