Manejo de Errores

Esta documentación explica cómo puedes manejar errores durante el desarrollo, en el lado del servidor y en el lado del cliente.

Manejo de Errores en Desarrollo

Cuando ocurre un error en tiempo de ejecución durante la fase de desarrollo de tu aplicación Next.js, encontrarás un overlay. Es un modal que cubre la página web. Solo es visible cuando el servidor de desarrollo se ejecuta usando next dev a través de pnpm dev, npm run dev, yarn dev o bun dev, y no se mostrará en producción. Corregir el error hará que el overlay desaparezca automáticamente.

Aquí un ejemplo de un overlay:

Manejo de Errores del Servidor

Next.js proporciona una página 500 estática por defecto para manejar errores del lado del servidor en tu aplicación. También puedes personalizar esta página creando un archivo pages/500.js.

Tener una página 500 en tu aplicación no muestra errores específicos al usuario.

También puedes usar la página 404 para manejar errores específicos en tiempo de ejecución como archivo no encontrado.

Manejo de Errores del Cliente

Los Límites de Error (Error Boundaries) de React son una forma elegante de manejar errores de JavaScript en el cliente para que otras partes de la aplicación sigan funcionando. Además de prevenir que la página se caiga, te permite proporcionar un componente de respaldo personalizado e incluso registrar información del error.

Para usar Límites de Error en tu aplicación Next.js, debes crear un componente de clase ErrorBoundary y envolver el prop Component en el archivo pages/_app.js. Este componente será responsable de:

• Renderizar una UI de respaldo cuando ocurra un error
• Proporcionar una forma de reiniciar el estado de la aplicación
• Registrar información del error

Puedes crear un componente de clase ErrorBoundary extendiendo React.Component. Por ejemplo:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)

    // Define una variable de estado para rastrear si hay un error
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // Actualiza el estado para que el siguiente render muestre la UI de respaldo

    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // Puedes usar tu propio servicio de registro de errores aquí
    console.log({ error, errorInfo })
  }
  render() {
    // Verifica si se lanzó un error
    if (this.state.hasError) {
      // Puedes renderizar cualquier UI de respaldo personalizada
      return (
        <div>
          <h2>¡Oops, hay un error!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            ¿Intentar de nuevo?
          </button>
        </div>
      )
    }

    // Retorna los componentes hijos si no hay error

    return this.props.children
  }
}

export default ErrorBoundary

El componente ErrorBoundary mantiene un estado hasError. El valor de esta variable es booleano. Cuando hasError es true, el componente renderizará una UI de respaldo. De lo contrario, renderizará los componentes hijos.

Después de crear el componente ErrorBoundary, impórtalo en el archivo pages/_app.js para envolver el prop Component en tu aplicación Next.js.

// Importa el componente ErrorBoundary
import ErrorBoundary from '../components/ErrorBoundary'

function MyApp({ Component, pageProps }) {
  return (
    // Envuelve el prop Component con el componente ErrorBoundary
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

export default MyApp

Puedes aprender más sobre Límites de Error en la documentación de React.

Reporte de Errores

Para monitorear errores del cliente, usa servicios como Sentry, Bugsnag o Datadog.