error.js

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

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

'use client' // Error components must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // Attempt to recover by trying to re-render the segment
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

Свойства

ошибка

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

ошибка.сообщение

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

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

ошибка.резюме

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

сброс

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

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

Важно знать:

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>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</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` введена.