Los errores en una aplicación web son inevitables: una request que falla, un token expirado, un cálculo incompatible o un bug que tumba la interfaz. Para resolverlos, Next.js incluye un archivo especial llamado error.tsx que actúa como red de seguridad y permite recuperar la parte que falló sin romper toda la app.

¿Qué es el archivo error.tsx en Next.js y para qué sirve?

El archivo error.tsx es un componente especial que Next.js reconoce automáticamente dentro de una ruta. Funciona como un wrapper que captura cualquier excepción generada en esa ruta y muestra una interfaz alternativa al usuario.

Lo interesante es que Next.js implementa de forma nativa un React Error Boundary a través de este archivo, así que no tienes que configurar nada extra para que la captura funcione.

¿Qué es un Error Boundary en React? Es un mecanismo que envuelve componentes y atrapa errores de renderizado para mostrar un fallback en lugar de romper toda la aplicación.

¿Cómo simular un error para probar el componente?

Para verificar el comportamiento, puedes forzar un fallo dentro de la función que hace el fetch de productos. Por ejemplo, comentando la API key de Shopify o lanzando manualmente una excepción con throw new Error(...) antes de retornar los datos [3:05].

Cuando el error es crítico, la app se cae por completo. Cuando la validación está bien hecha, simplemente no llegan datos y el error.tsx toma el control de esa sección.

¿Cómo crear un componente error.tsx paso a paso?

Dentro de la carpeta de la ruta que quieres proteger (por ejemplo, el home), creas un archivo llamado error.tsx. Hay un detalle no negociable: los componentes de error siempre deben ser del lado del cliente, así que arrancan con la directiva use client [5:20].

Una estructura mínima se ve así:

tsx 'use client'

interface ErrorProps { error: Error reset: () => void }

export default function Error({ error, reset }: ErrorProps) { return ( <div style={{ padding: '10rem' }}> <p>:( Ha ocurrido un error</p> <button onClick={() => reset()}>Intentar de nuevo</button> </div> ) }

Este componente solo afecta la ruta donde vive. Si está dentro de un layout, el resto del layout sigue funcionando con normalidad mientras la sección con error muestra el fallback.

¿Qué props recibe el componente error en Next.js?

El archivo recibe dos props que vienen ya implementadas por Next.js:

• error: el objeto de tipo Error con la información de lo que falló.
• reset: una función que reintenta el renderizado del componente afectado.

¿Para qué sirve la función reset? Permite reintentar el render del componente que falló. Es útil cuando el error es asíncrono, como una request intermitente, porque al ejecutar reset() el Error Boundary vuelve a montar el árbol y puede funcionar bien en el segundo intento.

Si el error es totalmente crítico, como un throw directo en la función de fetch, el reset no logrará recuperar la vista. Pero en errores transitorios, ese pequeño botón de reintento es bastante poderoso [8:40].

¿Cómo mostrar mensajes de error sin exponer información sensible?

Una tentación común es renderizar error.message directamente en pantalla. Esto no se recomienda porque puede entregar información valiosa a alguien que esté atacando el sitio, además de que al usuario final no le aporta nada técnico.

Lo recomendable es mostrar un mensaje genérico y amable, y reservar el detalle técnico para tus sistemas internos.

¿Cómo enviar errores a servicios de observabilidad como Sentry o Datadog?

Como el componente es client-side, puedes usar un useEffect que se dispare cuando el error se monte. Ahí dentro envías el error a tu servicio de monitoreo:

tsx import { useEffect } from 'react'

useEffect(() => { // analytics.captureException(error) console.error(error) }, [error])

Esto te permite integrar herramientas como Sentry, Datadog o Honeycomb para registrar lo que ocurrió, mientras el usuario solo ve un mensaje limpio y un botón para reintentar [10:15].

¿Qué buenas prácticas seguir al manejar errores en Next.js?

Algunas reglas que vale la pena fijar desde el primer día:

1. Mantén el error.tsx siempre como client component con 'use client'.
2. Tipa las props con una interfaz que incluya error: Error y reset: () => void.
3. Implementa un botón de reintento conectado a reset() para errores asíncronos.
4. Nunca expongas error.message directamente al usuario final.
5. Conecta un useEffect con tu servicio de observabilidad para registrar el incidente.
6. Aplica estilos cuidados al fallback para que la experiencia no se sienta rota.

La pantalla de error que aparece por defecto al fallar la carga de productos se ve bastante pobre visualmente. Tómalo como reto: dale tus propios estilos, mejora la tipografía, agrega un ícono y comparte tu resultado en los comentarios.