L19 · Construcción y vista previa · 5 min
Errores que tus usuarios nunca deberían ver
En una frase
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.
Piénsalo así
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 Definiciónlímite de error (error boundary)Una red de seguridad de tu app que atrapa errores inesperados y muestra un mensaje amable con «Reintentar».Abrir en el glosario →: 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 Definicióntraza de error (stack trace)La lista de pasos que llevaron a un error. Útil para tu agente; nunca se enseña a tus usuarios.Abrir en el glosario → 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 Definiciónmensaje de errorLo que dice un programa cuando algo falla. La primera línea suele decir qué; el resto dice dónde.Abrir en el glosario → completo se guarda en el Definiciónlog (registro)El diario de tu app: una línea por evento. Cuando algo se rompe, los logs cuentan qué pasó.Abrir en el glosario → del servidor con ese mismo código.
Cómo se ve 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
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.
Comprobación rápida · 1 pregunta