Application Insights en una aplicación en Angular

En este artículo, mostraré una breve introducción sobre Application Insights y también un ejemplo práctico de como añadirlo a una aplicación en Angular.

Introducción Application Insights

¿Qué es App Insights?

App Insights es un servicio de administración que nos permite realizar toda la supervisión sobre el rendimiento y el uso de nuestra página web o aplicación en Azure. Está diseñado para garantizar que obtengamos un rendimiento óptimo y la mejor experiencia de usuario del sitio web. También tiene una poderosa herramienta analítica que nos ayuda a diagnosticar problemas y obtener una comprensión de cómo las personas usan nuestra aplicación web.

App Insights nos ayudara a

• Detectar automáticamente las anomalías de rendimiento.
• Diagnosticar problemas mediante herramientas de análisis.
• Ver lo que hacen realmente los usuarios con las aplicaciones.
• Mejorar continuamente el rendimiento y la facilidad de uso de las aplicaciones.

Qué tipos de datos podemos recopilar con App Insights

• Páginas más visitadas, a qué hora del día y de dónde proviene ese tráfico.
• Tasas de dependencia o tiempos de respuesta y tasas de falla para averiguar si hay un servicio externo que está causando problemas de rendimiento en nuestra aplicación, tal vez un usuario está usando un portal para acceder a nuestra aplicación y hay problemas de tiempo de respuesta, por ejemplo.
• Excepciones para la información del servidor y del navegador, así como las visitas a la página y el rendimiento de la carga desde el lado de los usuarios finales.
• Información de la sesión: quién, qué, cuándo, dónde.
• Diagnóstico de rendimiento y host: le brinda una imagen completa de lo que sucede en nuestra aplicación.
• Registros de seguimiento para correlacionar eventos de seguimiento con solicitudes para ayudarnos a obtener una visión más profunda de los datos y profundizar en los diagnósticos para mejorar el rendimiento.
• También brinda flexibilidad, por lo que podemos escribir fragmentos de código personalizados para recopilar otros tipos de datos que no forman parte de los datos habituales recopilados.

Qué hacer con los resultados recopilados con App Insights

• Consultas personalizadas para crear informes, los informes se pueden ver a través del conjunto de herramientas de generación de informes de Azure, como Power BI, para obtener visualización e información analítica detallada sobre su aplicación.
• Configurar alertas, por ejemplo, para enviar correo con excepciones, también exportar datos a fuentes externa.

Cómo ver los datos recopilados con App Insights

Desde el portal de Azure podemos trabajar con los datos recopilados, realizar consultas, ver las excepciones, las páginas vistas, etc.

Veamos el código👇

Construiremos una aplicación que ilustre cómo configurar App Insights en Angular.

En el código fuente de este artículo se puede encontrar el ejemplo de la integración de App Insights en Angular.

Si tu café está listo comencemos.☕️

Configurar App Insights en Angular

La forma en que funciona App Insights es añadiendo un paquete (SDK) en nuestra aplicación y configurando un recurso de App Insights dentro de Azure, enviando así los datos a Azure para recopilar información.

1. En primer lugar, necesitamos crear recurso de App Insights en Azure

• Creamos nuevo recurso de Application Insights en nuestra suscripción de Azure y obtendremos una clave de instrumentación única para utilizar en nuestra app Angular y poder enviar datos de telemetría al recurso de App Insights creado.

2. En segundo lugar, instalamos bibliotecas de App Insights para Angular

• Instalamos a través de NPM los paquetes necesarios. El complemento de Angular applicationinsights-angularplugin-js habilita seguimiento de cambios de enrutador y seguimiento de excepciones no detectadas. Y applicationinsights-web paquete que combina paquetes de uso común para escenarios web.

npm i @microsoft/applicationinsights-angularplugin-js 
npm i @microsoft/applicationinsights-web

• Y después, copiamos la «Clave de instrumentación» en Angular en el archivo environment.ts de la carpeta environments, este archivo es buen lugar para configurar variables, constantes, etc. También podemos almacenarlo en un archivo .json con el objetivo de no incluir estos valores dentro del código JavaScript. En este ejemplo usaremos environment.ts para no complicarlo.

export const environment = {
    ...
    appInsights: {
        instrumentationKey: '<your-instrumentation-key>'
    }
};

3. En tercer lugar, configuramos App Insights en Angular

• Configuramos una instancia de Application Insights, en este caso creamos un servicio que actúa como una capa de abstracción alrededor de los componentes básicos que proporcionan ambos paquetes. Este servicio consume la API de JavaScript de App Insights para inicializar una instancia ApplicationInsights que está configurada con la clave de instrumentación de App Insights. Para seguimiento de cambios de enrutador, que es necesario para enviar datos de páginas vistas a App Insights, AngularPlugin se agrega a las extensiones.

import { AngularPlugin } from '@microsoft/applicationinsights-angularplugin-js';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
...

@Injectable()
export class InsightsService {
    private angularPlugin = new AngularPlugin();
    private appInsights = new ApplicationInsights({
        config: {
            instrumentationKey: environment.appInsights.instrumentationKey,
            extensions: [this.angularPlugin],
            extensionConfig: {
                [this.angularPlugin.identifier]: {
                    router: this.router
                },
            },
        },
    });

    constructor(private router: Router) {
        this.appInsights.loadAppInsights();
    }
    
    ...
}

• Creamos un modulo de abstracción desde donde iniciamos App Insights y después añadimos a nuestro app.module.ts

import { InsightsService } from './insights.service';

@NgModule({
    providers: [InsightsService],
})
export class InsightsModule {
    constructor(
        private insightsService: InsightsService
    ) { }
}

@NgModule({
  ...
  imports: [
    ...
    InsightsModule
  ],
  ...
})
export class AppModule { }

• Ahora este servicio se puede inyectar en la aplicación Angular para enviar eventos o seguimientos a App Insights:

export class AppComponent {
  constructor(private insightsService: InsightsService) {}
  ...
  sample() {
    this.insightsService.trackEvent("Mi custom event lanzado");
  }
  ...
}

Configuración de errores con App Insights en Angular

Los SDK capturan muchas excepciones automáticamente, por lo que no siempre es necesario llamar explícitamente a TrackException

1. Configuramos seguimiento de las excepciones no detectadas

Para realizar un seguimiento de las excepciones no controladas, configuramos ApplicationinsightsAngularpluginErrorService en el modulo insights.module.ts

import { ApplicationinsightsAngularpluginErrorService } from '@microsoft/applicationinsights-angularplugin-js';

@NgModule({
    providers: [
        ...
        {
            provide: ErrorHandler,
            useClass: ApplicationinsightsAngularpluginErrorService,
        }
    ],
})
...

2. Añadimos controlador de errores personalizado

• Creamos controlador de errores personalizado que implemente IErrorService

import { IErrorService } from '@microsoft/applicationinsights-angularplugin-js';

export class CustomErrorHandler implements IErrorService {
    handleError(error: any) {
        ...
    }
}

• Y pasamos a través de extensionConfig:

extensionConfig: {
        [angularPlugin.identifier]: {
          router: this.router,
          errorServices: [new CustomErrorHandler()]
        }
      }

3. Enviar excepciones detectadas a App Insights

• En este ejemplo, se muestra como enviar excepciones controladas a App Insights:

try {
    ...
}
catch (error) {
    this.insights.logException(error, SeverityLevel.Error);
}

Seguimiento de rutas con App Insights en Angular

De forma predeterminada, este SDK no controlará el cambio de ruta basado en el estado que se produce en las aplicaciones de página única. Para habilitar el seguimiento automático de cambios de ruta para una aplicación de página única, hay que agregar enableAutoRouteTracking: true a la configuración. No es asi en Angular, porque el complemento de Angular realiza un seguimiento automático de los cambios de ruta y recopila otra telemetría específica de Angular. enableAutoRouteTracking debe establecerse en false, si se establece en true, cuando la ruta cambia, se pueden enviar duplicados de PageViews.

config: {
            instrumentationKey: APP_INSIGHT_INSTRUMENTATION_KEY,
            enableAutoRouteTracking: false,
            ...
        }

Habilitar el seguimiento del tiempo en la página con App Insights en Angular

Hay que establecer autoTrackPageVisitTime: true, se realiza un seguimiento del tiempo (en milisegundos) que un usuario permanece en cada página. En cada instancia nueva vista de página, el tiempo que pasó el usuario en la página anterior se envía como una métrica personalizada denominada PageVisitTime.

config: {
            instrumentationKey: APP_INSIGHT_INSTRUMENTATION_KEY,
            autoTrackPageVisitTime: true,
            ...
        }

Todas las implementaciones de estos ejemplos están disponibles en el código de GitHub, que podéis descargar.

Eso es todo, por el momento, seguiré actualizando y agregando contenido en este post. Espero que te haya resultado interesante😉

Download / Descarga

El código fuente de este artículo se puede encontrar en GitHub

Enlaces de interés

Application Insights

API de Application Insights para eventos y métricas personalizados