Monitrace

Monitrace es una librería agnóstica para el registro, seguimiento y visualización de errores en aplicaciones web frontend.

Captura errores globales y de red (axios, fetch, xhr) y los envía a un backend centralizado para su análisis y visualización, con soporte de fallback offline (almacenamiento local en caso de desconexión).

🧠 ¿Qué es Monitrace?

Monitrace es parte de la solución de trazabilidad de errores frontend desarrollada por Ajal Technology, que incluye:

• Un SDK ligero multiplataforma (compatible con Angular, Vue, React y Vanilla JS).
• Un backend REST para almacenar errores.
• Un portal administrativo para visualizar errores por aplicación, ruta, tipo, fecha y usuario.

Esta herramienta permite detectar rápidamente errores en producción y mejorar la experiencia del usuario con análisis visuales.

🚀 Instalación

npm install @ajaltech/monitrace

🛠️ Uso básico

import { initMonitrace } from "@ajaltech/monitrace";

initMonitrace({
  client: "axios", // o 'fetch' o 'xhr'
  endpoint: "https://api.midominio.com/errores",
  appName: "mi-app-frontend",
  localFallback: true,
  userContext: () => ({
    userId: getUserId(),
    sessionId: getSessionId(),
  }),
});

🔍 Visualización de errores

El backend de Monitrace incluye un portal de administración que permite:

• Consultar errores del día.
• Ver rutas más problemáticas.
• Filtrar por usuario, tipo de error o componente.
• Exportar logs o integrarlos con otras herramientas.

Nota: El backend está incluido como parte de la solución Monitrace y puede ser desplegado en un entorno privado o en la nube.

⚙️ Tecnologías utilizadas

Monitrace utiliza las siguientes tecnologías:

• TypeScript
• tsup (compilador)
• Axios / Fetch interceptors
• localStorage / IndexedDB (soporte offline)
• MongoDB backend (parte de la solución completa)

🛠️ Uso con Angular (HttpClient)

Monitrace no intercepta directamente las llamadas realizadas con HttpClient de Angular, ya que este no utiliza fetch ni axios. Para capturar errores HTTP en Angular, es necesario instalar un interceptor dentro del proyecto Angular que envíe los errores a Monitrace.

🔧 Paso 1: Crear un interceptor en tu proyecto Angular

// monitrace-http.interceptor.ts
import { Injectable } from "@angular/core";
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpErrorResponse,
} from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { catchError } from "rxjs/operators";
import { sendError } from "@ajaltech/monitrace";

@Injectable()
export class MonitraceHttpInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => {
        sendError(
          {
            message: err.message,
            stack: "", // Angular no expone stack, puede dejarse vacío
            route: window.location.href,
            type: "http",
          },
          {
            endpoint: "https://TU_BACKEND/errores",
            appName: "MiAngularApp",
          }
        );
        return throwError(() => err);
      })
    );
  }
}

Reemplaza endpoint y appName con los datos reales de tu proyecto.

🧩 Paso 2: Registrar el interceptor en AppModule

import { HTTP_INTERCEPTORS } from "@angular/common/http";
import { MonitraceHttpInterceptor } from "./monitrace-http.interceptor";

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MonitraceHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}

💡 Este paso es opcional si tu proyecto Angular utiliza axios o fetch, ya que Monitrace puede interceptarlos automáticamente desde la librería.

🏷️ Licencia y atribución

Monitrace es una herramienta desarrollada y mantenida por Ajal Technology. Su uso está permitido bajo términos privados o de distribución empresarial.

Para más información, visita https://ajaltechnology.com. Su uso está permitido bajo términos privados o de distribución empresarial. Para más información, visita https://ajaltechnology.com