error.js

Un archivo error define un límite de interfaz de usuario (UI) para errores en un segmento de ruta.

Es útil para capturar errores inesperados que ocurren en Componentes de Servidor (Server Components) y Componentes de Cliente (Client Components), mostrando una UI de respaldo.

'use client' // Los componentes de error deben ser Componentes de Cliente

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Registrar el error en un servicio de reporte de errores
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>¡Algo salió mal!</h2>
      <button
        onClick={
          // Intentar recuperarse re-renderizando el segmento
          () => reset()
        }
      >
        Reintentar
      </button>
    </div>
  )
}

'use client' // Los componentes de error deben ser Componentes de Cliente

import { useEffect } from 'react'

export default function Error({ error, reset }) {
  useEffect(() => {
    // Registrar el error en un servicio de reporte de errores
    console.error(error)
  }, [error])

  return (
    <div>
      <h2>¡Algo salió mal!</h2>
      <button
        onClick={
          // Intentar recuperarse re-renderizando el segmento
          () => reset()
        }
      >
        Reintentar
      </button>
    </div>
  )
}

Props

`error`

Una instancia de un objeto Error enviado al Componente de Cliente error.js.

`error.message`

El mensaje de error.

Para errores de Componentes de Cliente, será el mensaje original del Error.
Para errores de Componentes de Servidor, será un mensaje genérico para evitar filtrar detalles sensibles. Se puede usar errors.digest para correlacionar con el error en los registros del servidor.

`error.digest`

Un hash generado automáticamente del error lanzado en un Componente de Servidor. Se puede usar para correlacionar con el error correspondiente en los registros del servidor.

Una función para reiniciar el límite de error. Al ejecutarse, intentará re-renderizar el contenido del límite de error. Si tiene éxito, el componente de error de respaldo será reemplazado por el resultado del re-renderizado.

Puede usarse para permitir que el usuario intente recuperarse del error.

Importante:

Los límites error.js deben ser Componentes de Cliente.

En builds de Producción, los errores de Componentes de Servidor tendrán detalles específicos eliminados para evitar filtrar información sensible.

Un límite error.js no manejará errores lanzados en un componente layout.js del mismo segmento, porque el límite de error está anidado dentro de ese componente de layout.

Para manejar errores en un layout específico, coloque un archivo error.js en el segmento padre del layout.

Para manejar errores en el layout raíz o template, use una variación de error.js llamada app/global-error.js.

`global-error.js`

Para manejar errores específicamente en el layout.js raíz, use una variación de error.js llamada app/global-error.js ubicada en el directorio raíz app.

'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html>
      <body>
        <h2>¡Algo salió mal!</h2>
        <button onClick={() => reset()}>Reintentar</button>
      </body>
    </html>
  )
}

'use client'

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>¡Algo salió mal!</h2>
        <button onClick={() => reset()}>Reintentar</button>
      </body>
    </html>
  )
}

Importante:

global-error.js reemplaza el layout.js raíz cuando está activo, por lo que debe definir sus propias etiquetas <html> y <body>.

Al diseñar la UI de errores, puede ser útil usar las React Developer Tools para activar manualmente los límites de error.

not-found.js

El archivo not-found se usa para renderizar UI cuando se lanza la función notFound() dentro de un segmento de ruta.

Historial de versiones

Versión	Cambios
`v13.1.0`	Se introdujo `global-error`.
`v13.0.0`	Se introdujo `error`.