ngx-monitoring

English

ngx-monitoring is a lightweight Angular HTTP interceptor that logs the response time of all outgoing HTTP requests made with Angular's HttpClient. Ideal for performance monitoring, diagnostics, and debugging.

🚀 Features

• 📡 Tracks all HTTP requests made with HttpClient
• ⏱️ Logs response time in milliseconds
• 🧩 Plug-and-play interceptor
• 🔧 Easily customizable for advanced use cases
• 📝 Form submission analytics and step tracking

⚡ Usage & Compatibility

Compatibility:

• Use v18.3.3 of ngx-monitoring for Angular 18 projects
• Use v19.2.20 of ngx-monitoring for Angular 19 projects

Installation

Install the library using npm or yarn:

npm install ngx-monitoring
# or
yarn add ngx-monitoring

Importing the Module

Import the MonitoringModule in your Angular app (usually in AppModule):

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { MonitoringModule } from "ngx-monitoring";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MonitoringModule.forRoot({
      baseUrl: "localhost:3000",
      serviceId: SERVICE_ID, // replace with your actual service ID
      pageLoadApiPath: "/Analytics/page-load",
      apiResponseApiPath: "/Analytics/api-response",
      formSubmissionPath: "/Analytics/form-submission", // api to post steps of a form
      filterWith: "your_filter", // optional filter
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Configuration Table

| Option | Type | Description | | -------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | baseUrl | string | Base URL for your monitoring API | | serviceId | string | Unique identifier for your service | | pageLoadApiPath | string | API endpoint to track page load times | | apiResponseApiPath | string | API endpoint to track response times | | formSubmissionPath | string | API endpoint to track form submission steps and analytics. Used by MonitoringApiService.postFormStep() | | filterWith | string | Optional string used to filter tracked requests. Requests whose URL contains this string will be excluded from being sent to the monitoring API. |

Form Submission Tracking

Use the MonitoringApiService to track form submission steps:

import { MonitoringApiService, FormSubmissionAnalyticsDto } from "ngx-monitoring";

export class YourComponent {
  constructor(private monitoringApi: MonitoringApiService) {}

  trackFormStep() {
    const formData: FormSubmissionAnalyticsDto = {
      timestamp: new Date(),
      serviceId: "your-service-id",
      stepSubmitted: 1,
      totalSteps: 5,
      stepName: "stepName",
      sessionId: "sessionId",
      formId: "formId",
      formName: "formName",
      formType: "formType",
      formUrl: "formUrl",
      errorMessage: undefined,
      infoMessage: "infoMessage",
    };

    this.monitoringApi.postFormStep(formData).subscribe();
  }
}

FormSubmissionAnalyticsDto Interface

export type FormSubmissionAnalyticsDto = {
  timestamp: Date;
  serviceId: string;
  stepSubmitted: number;
  totalSteps: number;
  stepName?: string;
  sessionId?: string;
  formId?: string;
  formName?: string;
  formType?: string;
  formUrl?: string;
  errorMessage?: string;
  infoMessage?: string;
};

Shqip

ngx-monitoring është një librari për Angular që regjistron kohën e përgjigjes për të gjitha kërkesat HTTP që bëhen me HttpClient të Angular dhe kohën e ngarkimit të faqeve.

🚀 Tiparet

• 📡 Regjistron të gjitha kërkesat HTTP të bëra me HttpClient
• ⏱️ Regjistron kohën e përgjigjes në milisekonda
• 🔧 Lehtësisht i personalizueshëm për përdorime të avancuara
• 📝 Analitikë dhe ndjekje të hapave të formave

⚡ Përdorimi & Versionet

Versionet:

• Përdorni v18.3.3 të ngx-monitoring për projekte Angular 18
• Përdorni v19.2.20 të ngx-monitoring për projekte Angular 19

Instalimi

Instaloni librarinë duke përdorur npm ose yarn:

npm install ngx-monitoring
# ose
yarn add ngx-monitoring

Importimi i Modulit

Importoni MonitoringModule në aplikacionin tuaj Angular (zakonisht në AppModule):

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { MonitoringModule } from "ngx-monitoring";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MonitoringModule.forRoot({
      baseUrl: "localhost:3000",
      serviceId: SERVICE_ID, // zëvendësoni me ID-në tuaj të shërbimit
      pageLoadApiPath: "/Analytics/page-load",
      apiResponseApiPath: "/Analytics/api-response",
      formSubmissionPath: "/Analytics/form-submission", // api për të postuar hapat e një forme
      filterWith: "your_filter", // filtër opsional
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Tabela e Konfigurimit

| Opsioni | Lloji | Përshkrimi | | -------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | baseUrl | string | URL bazë për API-në tuaj të monitorimit | | serviceId | string | Identifikues unik për shërbimin tuaj | | pageLoadApiPath | string | Endpoint API për të regjistruar kohët e ngarkimit të faqeve | | apiResponseApiPath | string | Endpoint API për të regjistruar kohët e përgjigjes | | formSubmissionPath | string | Endpoint API për të regjistruar hapat dhe analitikat e formave. Përdoret nga MonitoringApiService.postFormStep() | | filterWith | string | String opsional për të filtruar kërkesat e regjistruara. Kërkesat që përmbajnë këtë string do të përjashtohen nga dërgimi te API i monitorimit. |

Ndjekja e Hapave të Formës

Përdorni MonitoringApiService për të ndjekur hapat e dorëzimit të formave:

import { MonitoringApiService, FormSubmissionAnalyticsDto } from "ngx-monitoring";

export class YourComponent {
  constructor(private monitoringApi: MonitoringApiService) {}

  trackFormStep() {
    const formData: FormSubmissionAnalyticsDto = {
      timestamp: new Date(),
      serviceId: "your-service-id",
      stepSubmitted: 1,
      totalSteps: 5,
      stepName: "stepName",
      sessionId: "sessionId",
      formId: "formId",
      formName: "formName",
      formType: "formType",
      formUrl: "formUrl",
      errorMessage: undefined, // mesazh gabimi opsional
      infoMessage: "infoMessage", // mesazh informativ opsional
    };

    this.monitoringApi.postFormStep(formData).subscribe();
  }
}

Interface FormSubmissionAnalyticsDto

export type FormSubmissionAnalyticsDto = {
  timestamp: Date;
  serviceId: string;
  stepSubmitted: number;
  totalSteps: number;
  stepName?: string;
  sessionId?: string;
  formId?: string;
  formName?: string;
  formType?: string;
  formUrl?: string;
  errorMessage?: string;
  infoMessage?: string;
};