Otro tipo de aplicación que tenía que instrumentalizar con Application Insights era una desarrollada con el framework Ionic. Este está basado, a su vez, en los frameworks Angular, React y Vue, por lo que su integración es bastante sencilla. En este artículo te comparto una posible implementación para integrar Application Insight con tu aplicación móvil.

Crear recurso de Application Insights

Lo primero que necesitas es un recurso de Application Insights y este a su vez un workspace de Log Analytics:

# Variables
RESOURCE_GROUP="tour-of-heroes-ionic"
LOCATION="northeurope"
APPLICATION_NAME="tour-of-heroes-ionic"
# Create a resource group
az group create --name $RESOURCE_GROUP --location $LOCATION
# Create a Log Analytics workspace
az monitor log-analytics workspace create \
--resource-group $RESOURCE_GROUP \
--workspace-name $APPLICATION_NAME-log-analytics \
--location $LOCATION
# Get Log Analytics workspace id
LOG_ANALYTICS_WORKSPACE_ID=$(az monitor log-analytics workspace show \
--resource-group $RESOURCE_GROUP \
--workspace-name $APPLICATION_NAME-log-analytics \
--query "id" -o tsv)

# Create Application Insights
az monitor app-insights component create \
--app $APPLICATION_NAME-insights --location $LOCATION \
--kind web -g $RESOURCE_GROUP \
--application-type web \
--workspace $LOG_ANALYTICS_WORKSPACE_ID

Una vez finalice la creación, ya tienes un sitio donde enviar la telemetría.

Instalar las dependencias de Application Insights

Las dependencias que necesitas instalar para un proyecto de este tipo son dos, asumiendo que estás trabajando con Angular como framework para Ionic:

# Install Application Insights modules
npm install @microsoft/applicationinsights-web @microsoft/applicationinsights-angularplugin-js

Crear un servicio de Angular

En el caso de Ionic con Angular, puedes crear un servicio que incluya la configuración e inicialización de Application Insights. Para este ejemplo he definido uno como el siguiente:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularPlugin } from '@microsoft/applicationinsights-angularplugin-js';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApplicationInsightsService {
  appInsights: ApplicationInsights;
  angularPlugin: AngularPlugin;
  constructor(private router: Router) {
    this.angularPlugin = new AngularPlugin();
    this.appInsights = new ApplicationInsights({
      config: {
        connectionString: environment.appInsights.connectionString,
        enableCorsCorrelation: true,
        enableAutoRouteTracking: true,
        extensions: [this.angularPlugin],
        extensionConfig: {
          [this.angularPlugin.identifier]: { router: this.router }
        }
      }
    });
    this.appInsights.loadAppInsights();
  }
  logEvent(name: string, properties?: { [key: string]: any }) {
    this.appInsights.trackEvent({ name: name }, properties);
  }
  logMetric(name: string, average: number, properties?: { [key: string]: any }) {
    this.appInsights.trackMetric({ name: name, average: average }, properties);
  }
  logException(exception: Error, severityLevel?: number) {
    this.appInsights.trackException({ exception: exception, severityLevel: severityLevel });
  }
  logTrace(message: string, properties?: { [key: string]: any }) {
    this.appInsights.trackTrace({ message: message }, properties);
  }
}

Este, como ves, recupera la cadena de conexión de Application Insights del archivo environment, por lo que la misma tiene que estar definida en estos:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080/api/hero',
  appInsights: {
    connectionString: '[Your_App_Insights_Connection_String_Here]'
  }
};

Con todo ello configurado ya puedes inicializar este servicio como parte del arranque, incluyendo el mismo en el constructor de app.component.ts

import { Component, EnvironmentInjector, inject } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { ApplicationInsightsService } from './application.insights.service';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  standalone: true,
  imports: [
    IonicModule,
    CommonModule    
  ]
})
export class AppComponent {
  public environmentInjector = inject(EnvironmentInjector);
  constructor(private appInsights: ApplicationInsightsService) { }
}

Una vez que ejecutes la aplicación, ya sea en modo web, android o iOS comprobarás que la telemetría comenzará a llegar a tu recurso de Application Insights.

Aquí tienes un repositorio de ejemplo con esta configuración.

¡Saludos!