6 - Monitoring and Alerting for Web Applications

# Install the Sentry package for Angular
npm install @sentry/angular @sentry/browser

# Or with the automatic wizard
npx @sentry/wizard@latest -i angular
      

// main.ts - Sentry initialization
import * as Sentry from '@sentry/angular';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

// Initialize Sentry BEFORE bootstrapping the application
Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  environment: 'production',
  release: 'my-app@1.0.0',

  // Performance tracing
  tracesSampleRate: 0.2, // 20% of transactions

  // Session replay for errored sessions
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],

  // Filter irrelevant errors
  ignoreErrors: [
    'ResizeObserver loop limit exceeded',
    'Non-Error exception captured',
    /Loading chunk [\d]+ failed/,
  ],

  // Additional information for each event
  beforeSend(event) {
    // Remove sensitive data
    if (event.request?.cookies) {
      delete event.request.cookies;
    }
    return event;
  },
});

bootstrapApplication(AppComponent, appConfig);
      

// app.config.ts - Register Sentry providers
import { ApplicationConfig, ErrorHandler } from '@angular/core';
import { provideRouter, Router } from '@angular/router';
import * as Sentry from '@sentry/angular';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),

    // Custom Error Handler that sends to Sentry
    {
      provide: ErrorHandler,
      useValue: Sentry.createErrorHandler({
        showDialog: false,  // Don't show Sentry dialog to users
        logErrors: true,    // Also log to console
      }),
    },

    // Angular navigation tracking
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
  ],
};
      

// custom-error-handler.ts
import { ErrorHandler, Injectable, inject } from '@angular/core';
import * as Sentry from '@sentry/angular';

@Injectable()
export class CustomErrorHandler implements ErrorHandler {

  handleError(error: unknown): void {
    // Classify the error
    const errorInfo = this.classifyError(error);

    // Send to Sentry with additional context
    Sentry.withScope((scope) => {
      scope.setTag('error.type', errorInfo.type);
      scope.setTag('error.severity', errorInfo.severity);
      scope.setLevel(errorInfo.severity as Sentry.SeverityLevel);

      if (errorInfo.type === 'http') {
        scope.setContext('http', {
          status: (error as any)?.status,
          url: (error as any)?.url,
        });
      }

      Sentry.captureException(error);
    });

    // Log to console in development
    console.error('[CustomErrorHandler]', error);
  }

  private classifyError(error: unknown): { type: string; severity: string } {
    if (error instanceof TypeError) {
      return { type: 'type-error', severity: 'error' };
    }
    if ((error as any)?.status !== undefined) {
      const status = (error as any).status;
      if (status >= 500) return { type: 'http', severity: 'error' };
      if (status >= 400) return { type: 'http', severity: 'warning' };
    }
    if (error instanceof Error && error.message?.includes('ChunkLoadError')) {
      return { type: 'chunk-load', severity: 'warning' };
    }
    return { type: 'unknown', severity: 'error' };
  }
}
      

# Install web-vitals
npm install web-vitals
      

// web-vitals.service.ts
import { Injectable } from '@angular/core';
import { onCLS, onFCP, onINP, onLCP, onTTFB } from 'web-vitals';
import type { Metric } from 'web-vitals';

@Injectable({ providedIn: 'root' })
export class WebVitalsService {

  initializeTracking(): void {
    // Core Web Vitals
    onCLS(this.reportMetric.bind(this));
    onINP(this.reportMetric.bind(this));
    onLCP(this.reportMetric.bind(this));

    // Supplementary metrics
    onFCP(this.reportMetric.bind(this));
    onTTFB(this.reportMetric.bind(this));
  }

  private reportMetric(metric: Metric): void {
    const data = {
      name: metric.name,
      value: metric.value,
      rating: metric.rating,  // 'good' | 'needs-improvement' | 'poor'
      delta: metric.delta,
      id: metric.id,
      navigationType: metric.navigationType,
    };

    // Send to an analytics endpoint
    this.sendToAnalytics(data);

    // Send to Sentry as breadcrumb
    this.sendToSentry(data);

    // Console log for debugging
    console.log(`[Web Vital] ${metric.name}: ${metric.value} (${metric.rating})`);
  }

  private sendToAnalytics(data: Record<string, unknown>): void {
    // Send to Google Analytics
    if (typeof gtag !== 'undefined') {
      gtag('event', data['name'] as string, {
        value: Math.round(data['value'] as number),
        event_category: 'Web Vitals',
        event_label: data['rating'] as string,
        non_interaction: true,
      });
    }
  }

  private sendToSentry(data: Record<string, unknown>): void {
    import('@sentry/angular').then((Sentry) => {
      Sentry.addBreadcrumb({
        category: 'web-vital',
        message: `${data['name']}: ${data['value']} (${data['rating']})`,
        level: data['rating'] === 'poor' ? 'warning' : 'info',
        data: data,
      });
    });
  }
}
      

// app.component.ts
import { Component, OnInit, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { WebVitalsService } from './services/web-vitals.service';

@Component({
  selector: 'app-root',
  template: '<router-outlet />',
})
export class AppComponent implements OnInit {
  private webVitals = inject(WebVitalsService);
  private platformId = inject(PLATFORM_ID);

  ngOnInit(): void {
    // Web Vitals only works in the browser, not in SSR
    if (isPlatformBrowser(this.platformId)) {
      this.webVitals.initializeTracking();
    }
  }
}
      

# GitHub Actions for uptime monitoring
name: Uptime Check

on:
  schedule:
    - cron: '*/15 * * * *'  # Every 15 minutes

jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - name: Check site availability
        run: |
          STATUS=$(curl -s -o /dev/null -w "%{http_code}" https://example.com)
          RESPONSE_TIME=$(curl -s -o /dev/null -w "%{time_total}" https://example.com)

          echo "Status: $STATUS"
          echo "Response time: ${RESPONSE_TIME}s"

          if [ "$STATUS" != "200" ]; then
            echo "ALERT: Site returned status $STATUS"
            exit 1
          fi

          # Check response time
          THRESHOLD="3.0"
          if (( $(echo "$RESPONSE_TIME > $THRESHOLD" | bc -l) )); then
            echo "WARNING: Response time ${RESPONSE_TIME}s exceeds threshold ${THRESHOLD}s"
          fi
      

# Upload source maps in the CI/CD pipeline
  - name: Build with source maps
    run: npx ng build --configuration=production --source-map

  - name: Upload source maps to Sentry
    uses: getsentry/action-release@v1
    env:
      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
      SENTRY_ORG: my-organization
      SENTRY_PROJECT: my-angular-app
    with:
      environment: production
      version: ${{ github.sha }}
      sourcemaps: './dist/my-app/browser'
      url_prefix: '~/'

  - name: Remove source maps before deploy
    run: find dist/my-app/browser -name "*.map" -delete
      

Sentry Alert Configuration:

Alert 1: Error Spike
  Condition: When event count > 100 in 1 hour
  Action: Notify Slack #alerts + email team lead
  Frequency: Max 1 notification every 30 minutes

Alert 2: New Error in Production
  Condition: First occurrence of a new issue
  Action: Notify Slack #errors
  Frequency: Every new issue

Alert 3: Regression
  Condition: Previously resolved issue reappears
  Action: Notify Slack #alerts + assign to last resolver
  Frequency: Every regression

Alert 4: Performance Budget
  Condition: LCP p95 > 4 seconds
  Action: Notify Slack #performance
  Frequency: Max 1 notification every 2 hours
      

+----------------------------------------------------------+
|                    Application Health                      |
+----------------------------------------------------------+
|                                                            |
|  Uptime: 99.97%    Error Rate: 0.3%    Avg LCP: 1.8s     |
|                                                            |
+----------------------------------------------------------+
|  Core Web Vitals (p75)                                     |
|  +--------+  +--------+  +--------+                        |
|  | LCP    |  | INP    |  | CLS    |                        |
|  | 1.8s   |  | 120ms  |  | 0.05   |                        |
|  | (good) |  | (good) |  | (good) |                        |
|  +--------+  +--------+  +--------+                        |
+----------------------------------------------------------+
|  Errors Last 7 Days                 | Top Errors            |
|  +-----------------------------+   | 1. TypeError: null    |
|  | Mon Tue Wed Thu Fri Sat Sun |   | 2. ChunkLoadError     |
|  |   5   3   8   2  12   1   0 |   | 3. HttpError 500      |
|  +-----------------------------+   | 4. NetworkError       |
+----------------------------------------------------------+
      

// monitoring-setup.ts - Centralized configuration
import { Injectable, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class MonitoringService {
  private platformId = inject(PLATFORM_ID);

  initialize(): void {
    if (!isPlatformBrowser(this.platformId)) return;

    // 1. Error Tracking (Sentry already configured in main.ts)

    // 2. Web Vitals
    this.setupWebVitals();

    // 3. Custom error boundary for unhandled errors
    this.setupGlobalErrorHandlers();

    // 4. Network monitoring
    this.setupNetworkMonitoring();
  }

  private async setupWebVitals(): Promise<void> {
    const { onCLS, onINP, onLCP, onFCP, onTTFB } = await import('web-vitals');
    const report = (metric: any) => {
      console.log(`[Vital] ${metric.name}: ${metric.value}`);
    };
    onCLS(report);
    onINP(report);
    onLCP(report);
    onFCP(report);
    onTTFB(report);
  }

  private setupGlobalErrorHandlers(): void {
    // Catch unhandled promises
    window.addEventListener('unhandledrejection', (event) => {
      console.error('[Unhandled Rejection]', event.reason);
    });

    // Catch resource loading errors
    window.addEventListener('error', (event) => {
      if (event.target instanceof HTMLScriptElement) {
        console.error('[Script Load Error]', event);
      }
    }, true);
  }

  private setupNetworkMonitoring(): void {
    // Monitor connection changes
    const connection = (navigator as any).connection;
    if (connection) {
      connection.addEventListener('change', () => {
        console.log('[Network]', {
          effectiveType: connection.effectiveType,
          downlink: connection.downlink,
          rtt: connection.rtt,
        });
      });
    }
  }
}