Manejo de errores por ruta con ErrorElement

Cuando un loader lanza un error porque una propiedad no existe, necesitas una forma elegante de mostrarlo. Aquí aprenderás a manejar errores por ruta con ErrorElement y el hook useRouteError en React Router, algo clave si construyes aplicaciones donde una ruta puede fallar sin romper toda la pantalla.

Esto es útil para desarrolladores frontend que ya trabajan con React Router y quieren que su app deje de fallar en silencio o mostrar pantallas rotas.

¿Qué hace ErrorElement y para qué sirve useRouteError?

La idea central es sencilla: cuando algo falla dentro de una ruta, ErrorElement renderiza un componente que tú controlas en lugar de dejar la pantalla en blanco. Y para leer qué error ocurrió, usas el hook useRouteError.

Todo empieza creando un archivo nuevo dentro de la carpeta pages, que en la clase se nombra route-error-page.tsx [00:23]. Se llama así porque sí tiene contenido para renderizar en pantalla.

Dentro de ese archivo importas tres cosas desde React Router:

• useRouteError, el hook que te da acceso al error.
• isRouteErrorResponse, una función que valida y extrae información del error.
• Link, el componente que ya venías usando en lecciones anteriores.

¿Qué es useRouteError? Es un hook de React Router que te devuelve el error lanzado por una ruta o su loader, para que puedas leerlo y mostrarlo en pantalla.

¿Cómo se construye el componente RouteErrorPage?

El componente arranca con export default para mantener continuidad con la clase anterior, porque todas las páginas deben definir su nombre usando export default [01:04].

Después usas el error que devuelve useRouteError, y a partir de ese error obtienes un status mediante isRouteErrorResponse [01:16]. Aquí viene lo interesante: dependiendo del valor del error, recuperas el status y la información asociada. Si no recibe nada, el valor es null.

En la interfaz tienes un componente main que muestra el mensaje "Something went wrong; we couldn't load this page" [01:38]. Junto a ese mensaje aparece el código de estado, pero solo si existe.

• Si hay un status, se muestra en pantalla.
• Si el valor es null, esa línea simplemente no se renderiza.
• El Link siempre está disponible para volver al inicio.

Por eso se importa Link desde React Router: para ofrecer un camino de regreso cuando algo sale mal.

¿Cómo configurar ErrorElement en el router de forma global o por ruta?

Una vez listo el componente, vas a tu router para decidir dónde y cuándo usarlo. Primero importas la nueva página route-error-page desde el directorio pages [02:15].

Luego reemplazas el error "Not Found" anterior y colocas ErrorElement dentro del layout principal, en tu path [02:28]. Usas la misma sintaxis withSuspense que ya creaste antes, y dentro renderizas el RouteErrorPage.

Con esto tienes dos escenarios distintos que conviene no confundir:

1. Ruta 404 por defecto: si visitas una ruta que no existe, se muestra la Not Found Page con el mensaje "404 page not found" [03:10].
2. Error dentro de una ruta que sí existe: aquí entra ErrorElement.

El ejemplo lo deja claro. Las rutas de propiedades tienen un identificador, y en la clase existen seis propiedades [03:40]. Si intentas renderizar la número 11, la app te dice que algo salió mal y aparece tu RouteErrorPage con el código de estado 404 [03:52]. Al hacer clic en "Back to Top" vuelves al inicio.

¿Cuál es la diferencia entre un error 404 global y un ErrorElement por ruta? El 404 global aparece cuando la ruta no existe. El ErrorElement se activa cuando la ruta sí existe pero no logra cargar su contenido, como una propiedad inexistente.

¿Dónde conviene colocar ErrorElement, en el layout o en una ruta específica?

Al ponerlo dentro del layout principal (la raíz /), ErrorElement renderiza cualquier error que detecte en las rutas hijas [04:30]. Funciona como un fallback general de la app.

Pero quizás no quieras eso. Si ya tienes un 404 que cubre casi todos los casos y solo necesitas manejar errores en properties, puedes aplicarlo de forma específica en esa ruta [04:50]. Usas la misma estructura: ErrorElement, lo renderizas con Suspense y guardas.

Entonces el comportamiento se divide así:

• Una ruta global inexistente devuelve el 404 general.
• Una ruta de properties que no responde muestra tu componente específico con código 404 [05:20].

¿ErrorElement se usa solo en el layout raíz? No. Puedes usarlo en una ruta específica para manejar errores de esa ruta, o en el layout raíz como fallback general de toda la aplicación.

La lección clave es esa doble aplicación: cuando lo aplicas a una ruta, manejas errores puntuales de esa ruta; cuando lo usas en el root layout, actúa como respaldo general si una página o ruta no responde [05:40].

En la siguiente lección se compara React Router con herramientas como TanStack Router y el router de Next.js, para entender hacia dónde puede llevar este conocimiento al planear un nuevo proyecto. ¿Ya probaste aplicar ErrorElement en tu propio router? Cuéntame en los comentarios cómo lo estructuraste.