error.js

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

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

'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>
  )
}

Пропсы

`error`

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

`error.message`

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

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

`error.digest`

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

`reset`

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

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

Важно знать:

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

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

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

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

Для обработки ошибок в корневом макете или шаблоне используйте вариант 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>.

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

not-found.js

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

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

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

On this page