# Errores que tus usuarios nunca deberían ver

> Quien visita tu web nunca debería ver trazas de error ni pantallas rotas: tu app muestra avisos amables para los fallos previsibles, usa redes de seguridad (`not-found.tsx`, `error.tsx` y `global-error.tsx`) con un botón «Reintentar» para los inesperados y da un código corto conectado al log.

## Analogía

Si en un restaurante se acaba la sopa, quien atiende tu mesa no te tira encima el albarán manchado de la cocina. Te avisa con amabilidad y te ofrece otro plato; o, si se ha averiado el horno, te da un número de referencia mientras la cocina lo resuelve.

## Cómo funciona

Toda aplicación web se enfrenta a dos tipos distintos de problemas: **errores previsibles** (cosas que ocurren durante el uso normal, como dejar un campo vacío, escribir mal la contraseña o abrir un enlace que no existe) y **errores inesperados** (algo falló en el servidor o un servicio externo no respondió).

Los **errores previsibles** se atienden allí mismo, sin romper la página. Un formulario devuelve un aviso claro junto al campo («Escribe una dirección de correo válida»), y un elemento que no existe activa `notFound()` para mostrar tu página `not-found.tsx` con un enlace para volver al inicio.

Los **errores inesperados** los atrapa un error-boundary: una red de seguridad integrada en Next.js. Cada sección principal tiene un archivo `error.tsx` que intercepta los fallos de esa zona y muestra un mensaje amable con un botón **«Reintentar»**, mientras que `global-error.tsx` actúa como última red para toda la app.

Quien usa tu app **nunca** debe ver una stack-trace en crudo: confunde a las personas y puede revelar rutas internas a atacantes. En su lugar, la pantalla muestra un mensaje claro y un código corto de referencia (como `7F3K-2Q`), mientras el error-message completo se guarda en el log del servidor con ese mismo código.

## En tu proyecto

Ya en la Tarea 1 (el esqueleto de la app), tu agente añade `error.tsx`, `global-error.tsx` y `not-found.tsx` para que tu proyecto tenga redes de seguridad desde el primer día. Y cada vez que crea un formulario, devuelve los avisos de validación como texto claro en lugar de lanzar errores en crudo.

## Copia para tu agente

```text
Comprueba que nuestra app tenga not-found.tsx, error.tsx (con un botón «Reintentar») y global-error.tsx, y verifica que los errores inesperados muestren un mensaje amable con un código corto de referencia mientras guardan los detalles solo en el servidor.
```

---
Fuente: [Agentic Makers](https://agenticmakers.app/es/aprende/errores-que-tus-usuarios-nunca-deberian-ver) · Licencia: CC BY 4.0