En este tutorial, se introducirá a los errores en JavaScript, el concepto try-catch y cómo se utiliza y una pequeña introducción al manejo de errores internos con el Angular errorHandler.
Errores
Una de mis estrellas de cine favoritas, Samuel L. Jackson, fue la primera persona a la que le escuché la frase «to err is human», y aunque no recuerdo el título de la película en concreto ahora puedes estar de acuerdo conmigo en que lo mismo ocurre con los errores al escribir código. Como desarrollador de Angular, ya sabes que los errores pueden ser causados por errores personales, como tener una sentencia import con el nombre de la extensión del archivo en Angular 7 y que aparezca en tu navegador si no lo capturas.
import { DataService } from 'src/app/services/data.service.ts';Los errores pueden surgir por la falta de pruebas, por las comunicaciones con el servidor o incluso por la ambigüedad del proyecto de Angular en el que estás trabajando. Somos seres humanos y por eso somos propensos a cometer errores, esa es una de las razones por las que un buen editor como VS Code siempre te hará chirriar cuando empieces a descarrilar.
Requisitos
Para poder seguir la demostración de este artículo debes tener:
- La versión 11.0 de Node instalada en tu máquina.
- La versión 6.7 del gestor de paquetes de Node (suele venir con la instalación de Node).
- La versión 7 de Angular CLI.0
- La última versión de Angular (versión 7)
// run the command in a terminal ng versionConfirma que estás usando la versión 7, y actualiza a la 7 si no lo estás.Otras cosas que serán nice-to-haves son:
- Un conocimiento práctico del framework Angular a nivel de principiante.
- La familiaridad con los servicios de Angular será un plus pero no un requisito.
Tipos de errores
Hay muchos tipos de errores pero los agruparé en dos categorías principales: errores internos y externos.
- Errores internos: (también conocidos como errores del lado del cliente) Son aquellos de los que se puede responsabilizar, los errores de sintaxis, los errores del gestor de paquetes, los errores de referencia, los errores de tipo y todo tipo de errores del lado del cliente que pueden ser solucionados por el desarrollador dentro de la aplicación Angular.
- Errores externos: (también conocidos como errores del lado del servidor) Estos pueden abarcar desde errores del servidor, que en su mayoría vienen con códigos de estado de tres dígitos como 500 a errores de red de Internet, hasta incluso errores específicos del navegador. Estos son básicamente errores que están fuera del alcance de la aplicación Angular de ahí el nombre de outsider.
Este artículo se centrará en los errores insider y luego un artículo posterior se centrará en los errores outsider.
¡Pasos de bebé: throw y catch!
Cuando se ejecuta una función en JavaScript, esa función se une a una especie de cola de ejecución de funciones y a medida que la aplicación se ejecuta y llega a su turno sale de la cola y se ejecuta. Por lo tanto, si se produce un error, JavaScript lanza una excepción, que eliminará inmediatamente todas las operaciones en la cola hasta que se maneje la excepción. En un nivel básico, las excepciones se manejan con bloques try/catch, toda la aplicación se bloquea si el compilador no ve este bloque try/catch. La sintaxis de try/catch tiene el siguiente aspecto:
Verás la utilidad en una pequeña demostración. Crea un nuevo proyecto Angular con el CLI, llámalo ngapp
ng new ngappAcepta la configuración del router y elige CSS plano como hoja de estilo. Ve al archivo app.component.ts y copia en el código de abajo:
Copia estos en el app.component.html
<!-- src/app/app.component.html --> <button (click)="normalError()"> Fire Normal Error </button>Luego copia estos estilos básicos en el app.component.css
Ejecuta la aplicación en desarrollo así:
ng serveEn algunos casos fallará al compilar, cuando esto suceda vuelve a ejecutarlo y compilará.
Esto se muestra en la consola y la mayoría de las veces, rompe toda la aplicación inmediatamente como puedes ver el mensaje que registramos no se mostró. El bloque try/catch maneja estas excepciones con gracia y la aplicación sigue funcionando. Así que, si tuvieras otro botón con un bloque try catch esta vez, puedes ver la diferencia. Copia esto en el archivo app.component.html file :
Copia el código de abajo en el archivo app.component.ts:
El código en negrita muestra la misma instancia de error de referencia, pero esta vez está envuelto en un bloque try-catch para que pueda ser manejado con gracia. Cuando ejecutes la aplicación de nuevo, debería verse así:
Limitaciones de try/catch
Por muy bueno que sea try/catch, pensando en la aplicación ya ves cómo no es sostenible. Esto es porque no puedes ir añadiendo estos bloques try/catch en cada función de tu aplicación, eso no es efectivo en cuanto a recursos. La buena noticia es que Angular tiene una especie de try/catch global que podemos utilizar en un lugar centralizado para atrapar todas las excepciones.
Error handler
Angular tiene una clase de manejo de errores global llamada errorHandler que proporciona un gancho para el manejo de excepciones centralizado dentro de tu aplicación. Básicamente intercepta todos los errores que ocurren en tu aplicación, y los registra todos en la consola, y evita que la aplicación se cuelgue (esta fue la razón por la que tu primer botón no cuelga la aplicación).La sintaxis se ve así:
Esto nos permite modificar el comportamiento por defecto de registrar los errores en la consola a nuestra propia lógica después de haberlo añadido a nuestra lista de proveedores en nuestro módulo de la aplicación. Ve al archivo app.component.ts y copia el código de abajo en él:
El bloque try catch ha sido eliminado, por lo que deberías tener dos líneas chirriantes (o problemas) en tu editor de código que significan dos errores de referencia. Ahora para probar el controlador de errores global de Angular, navegue hasta el archivo app.module.ts y copie el código siguiente:
Los cambios realizados al igual que la sintaxis sugieren que creamos una clase de controlador de errores global que implementa el controlador de errores de Angular y luego lo registramos en la sección del proveedor.Nuestra lógica simplemente comprueba los errores y registra un mensaje para cualquier error encontrado. Si guardas esto y ejecutas la aplicación verás los textos registrados en la consola para cada error y la aplicación funcionando como si fuera un try-catch.
Servicio de errores
Ahora puedes ver que toda nuestra lógica de errores está dentro del módulo central de la aplicación, esta no es la forma en que Angular nos anima a escribir código. Así que en línea con mantener todo modular, usamos un servicio. lo llamaremos servicio de error y toda la lógica de cómo manejar sus errores se mantendrá en él. En primer lugar, genera un servicio de Angular con el CLI:
ng generate service erroro
ng g s errorDespués tienes que eliminar la lógica del manejador de errores en tu archivo app.module.ts para que quede así:
Después utiliza el CLI para generar un componente de error al que redirigir al usuario si se produce un error.
ng g c errorAhora que tienes el componente de error no necesitas modificarlo, navega al archivo error.service.ts y copia el código de abajo en él:
Aquí la lógica se modifica un poco para comprobar primero el tipo de error que es, si es un error interno entonces navega al usuario a una página de error como el error ocurre. Así que asegúrese de que su archivo app-routing.module.ts se actualiza con la ruta así:
Finalmente, su archivo app.component.html debe tener este aspecto:
Si usted siguió el post hasta este punto, puede ejecutar la aplicación en el desarrollo de nuevo, sus errores serán manejados con gracia como se esperaba.
Conclusión
Has sido introducido a los errores y el concepto detrás de su manejo en Angular con la clase errorHandler con enfoque en los errores de JavaScript del lado del cliente. El siguiente tutorial profundizará en los errores externos, los interceptores HTTP y el seguimiento de errores con un servicio remoto construyendo sobre todos los conceptos que has aprendido en este post. El código completo de este tutorial está en GitHub y se puede encontrar aquí.