Real‑Time Telecom Analytics in Angular 20+: Telemetry Pipelines, Exponential Retry, and Typed Event Schemas That Don’t Drop Frames

The challenge

The initial dashboard looked fine at 2k events/min. Production routinely spiked to 50–70k events/min during primetime. Every packet triggered chart updates and table diffs. When a network segment blipped, we saw cascading reconnects and duplicate events. INP cratered, charts stuttered, and ops lost trust in the numbers.

• Bursty telemetry from millions of set‑top boxes and mobile apps

• WebSocket disconnect storms during regional network spikes

• UI re-rendering per event causing INP regressions

What we needed

We anchored the UX around three principles: trust the data, don’t punish the main thread, and degrade gracefully. That meant strong types at the boundary, backpressure in the stream, and render on windows—not on events.

• Typed event contracts to stop schema drift

• Loss-aware retry with jitter, not infinite hammering

• Windowed aggregation to redraw charts on a cadence, not per packet

Symptoms

Unbounded streams plus untyped payloads create UI chaos. You can’t batch what you can’t trust, and you can’t reconnect safely without a policy. Typed events and a retry/circuit‑breaker strategy turn chaos into predictable load.

• Janky charts at high throughput

• Silent metric skew after a backend change

• WebSocket reconnect loops killing battery and bandwidth

Signals + SignalStore to the rescue

We used Angular Signals to model connection state, windowed aggregates, and alerts. SignalStore (ngrx/signals) wrapped those signals with methods and selectors so features stayed composable and testable.

• Minimal mutable state; everything else is derived

• Fine-grained reactivity avoids zone.js churn

• Testable methods for ingest, aggregate, and flush

Nx architecture

In an Nx monorepo, we split contracts from UI. Contract tests in CI protected event shapes. The WebSocket client lived in libs/telemetry with no Angular deps for easy reuse in workers.

• apps/analytics-shell for SSR-ready host

• libs/telemetry for types, guards, and WebSocket client

• libs/kpis for aggregation and SignalStore

Typed event envelopes

We enforced an envelope that carried type, version, ts, and payload. AJV validated JSON Schema at the edge; in the app we used TypeScript guards to keep the hot path fast.

• Discriminated union by type + version

• Runtime guards to protect against partial deploys

• Backwards compatibility via versioned payloads

Signals store skeleton

// telemetry.types.ts
export type MetricEvent =
  | { type: 'impression'; version: 2; ts: number; payload: { adId: string; deviceId: string; region: string } }
  | { type: 'click'; version: 1; ts: number; payload: { adId: string; deviceId: string } }
  | { type: 'play'; version: 1; ts: number; payload: { adId: string; durationMs: number; deviceId: string } };

export interface EventEnvelope<T extends MetricEvent = MetricEvent> {
  id: string;
  event: T;
}

// telemetry.store.ts
import { Injectable, computed, effect, signal } from '@angular/core';
import { MetricEvent, EventEnvelope } from './telemetry.types';

@Injectable({ providedIn: 'root' })
export class TelemetryStore {
  private _conn = signal<'connected'|'connecting'|'disconnected'>('disconnected');
  private _window = signal<MetricEvent[]>([]);
  private _dropped = signal(0);

  readonly connection = this._conn.asReadonly();
  readonly dropped = this._dropped.asReadonly();
  readonly lastSecondCounts = computed(() => {
    const win = this._window();
    return {
      impressions: win.filter(e => e.type==='impression').length,
      clicks: win.filter(e => e.type==='click').length,
      plays: win.filter(e => e.type==='play').length,
    };
  });

  push(ev: EventEnvelope) {
    // Bound the sliding window to keep memory predictable
    this._window.update(w => {
      const next = [...w, ev.event];
      return next.slice(-5000);
    });
  }

  setConnection(state: 'connected'|'connecting'|'disconnected') { this._conn.set(state); }
  incDropped() { this._dropped.update(n => n + 1); }
}

Exponential retry with jitter

import { defer, retryWhen, scan, timer, tap, finalize, filter, map, bufferTime } from 'rxjs';

function backoffWithJitter(max = 30000) {
  return retryWhen(errors => errors.pipe(
    scan((acc) => ({ attempt: acc.attempt + 1 }), { attempt: 0 }),
    tap(({ attempt }) => console.warn('ws reconnect attempt', attempt)),
    // full jitter: random between 0 and exponential delay
    map(({ attempt }) => Math.min(max, Math.pow(2, attempt) * 500)),
    map(base => Math.floor(Math.random() * base)),
    // wait
    // eslint-disable-next-line rxjs/no-ignored-observable
    (delayMs) => delayMs.pipe
      ? delayMs
      : timer(delayMs as unknown as number)
  ));
}

const stream$ = defer(() => socket.connect())
  .pipe(
    backoffWithJitter(),
    // backpressure: aggregate server-side or buffer client-side
    bufferTime(250), // 250ms cadence to the UI
    filter(batch => batch.length > 0)
  );

• Cap max delay to 30s

• Full jitter avoids thundering herds

• Reset on successful connect

Circuit breaker via Signals

@Injectable({ providedIn: 'root' })
export class CircuitBreaker {
  private _state = signal<'closed'|'open'|'half-open'>('closed');
  private _failures = signal<number[]>([]); // epoch seconds
  readonly state = this._state.asReadonly();

  recordFailure(now = Date.now()) {
    this._failures.update(f => [...f, Math.floor(now/1000)].filter(ts => ts > Math.floor(now/1000) - 60));
    if (this._failures().length >= 5) this._state.set('open');
  }
  allowAttempt() { return this._state() !== 'open'; }
  success() { this._state.set('closed'); this._failures.set([]); }
}

When the breaker opened, we paused reconnects, surfaced a banner, and kept the last known good aggregates visible. No spinner storms, no user panic.

• Open on 5 failures in 60s

• Half-open with a single probe

• Close on stable 30s

Results of backpressure

Batching at 250ms, plus capped chart series, turned a flood into a heartbeat. Users saw the same data with less motion and more trust.

• 83% fewer chart reflows

• INP improved from 280ms to 95ms on busy pages

• Device CPU dropped ~40% on low-end tablets

Discriminated unions + JSON Schema

// guards.ts
export function isImpression(e: MetricEvent): e is Extract<MetricEvent, { type: 'impression' }> {
  return e.type === 'impression' && e.version >= 2 && !!(e as any).payload?.adId;
}

// sample JSON Schema fragment shipped to edge validator (AJV)
export const ImpressionV2Schema = {
  type: 'object',
  properties: {
    type: { const: 'impression' },
    version: { const: 2 },
    ts: { type: 'number' },
    payload: {
      type: 'object',
      properties: {
        adId: { type: 'string' },
        deviceId: { type: 'string' },
        region: { type: 'string' }
      },
      required: ['adId','deviceId','region']
    }
  },
  required: ['type','version','ts','payload']
} as const;

• Compile-time types for Angular

• Runtime validation at the edge

• Versioned payloads instead of breaking fields

Contract tests in Nx CI

# .github/workflows/contracts.yml
name: contracts
on: [push, pull_request]
jobs:
  contract-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx run contracts:test
      - run: npx ts-node tools/validate-samples.ts # validates golden payloads against JSON Schema

This stopped “surprise fields” from leaking into production. When the backend added region to impressions, CI forced a coordinated rollout.

• libs/contracts exports the canonical schemas

• SDKs and services import from the same source

• GitHub Actions fails on any drift

Render from aggregates

// component.ts
chartOptions: Highcharts.Options = {
  chart: { animation: false },
  series: [{ type: 'spline', name: 'Impressions', data: [] }],
};

updateChart(win = this.store.lastSecondCounts()) {
  const series = this.chartOptions.series![0] as Highcharts.SeriesSplineOptions;
  const now = Date.now();
  (series.data as any[]).push([now, win.impressions]);
  // keep last 10 minutes at 4 pts/sec => 2400 points
  (series.data as any[]).splice(0, Math.max(0, (series.data as any[]).length - 2400));
}

• Windowed KPIs and charts at 250ms cadence

• Bounded series to last N minutes

• Virtualized tables for long event lists

PrimeNG tiles and alert banner

<p-toast></p-toast>
<p-messages *ngIf="breaker.state() !== 'closed'" severity="warn" [closable]="false" aria-live="polite">
  Connection is unstable. Showing last known good data.
</p-messages>
<div class="kpis">
  <p-card header="Impressions/s">{{ store.lastSecondCounts().impressions }}</p-card>
  <p-card header="Clicks/s">{{ store.lastSecondCounts().clicks }}</p-card>
  <p-card header="Plays/s">{{ store.lastSecondCounts().plays }}</p-card>
</div>

We avoided flashy animations. The win came from stability: tiles update at a heartbeat; charts slide smoothly; alerts speak clearly when the network flakes.

• Simple visuals, readable at a glance

• Banners reflect circuit breaker state

• Accessible with ARIA live regions

Accessibility and UX metrics

We tracked Core Web Vitals in CI and production with Lighthouse/GA4. Accessible alerts and reduced motion defaults kept the experience inclusive without sacrificing fidelity.

• LCP < 1.8s on dashboards

• INP < 120ms while streaming

• CPU within budget on low-end devices

Before → After

We also saw a 3x throughput headroom during primetime. Leadership stopped asking, “Can we trust this?” and started asking, “What else can we see?”

• Dropped events: ~3.4% → <0.1%

• INP on heavy pages: 280ms → 95ms

• Chart reflows/min: 300+ → ~50

• Ops confidence: recurring escalations → none in 90 days

Next steps for your team

We wired metrics into Firebase Logs and OpenTelemetry to trend socket health per region. Feature flags and two‑step deploys (SDK → UI) made schema changes boring.

• Add OpenTelemetry spans around socket lifecycle

• Expose SLOs: connect rate, delay, drop, and duplicate

• Phase canary releases via Firebase or your CD system

Bring in help when

As a remote Angular consultant, I stabilize chaotic codebases, design typed telemetry, and ship dashboards your ops team can trust. If your board jitters, let’s talk.

• You see UI jank under bursty traffic

• Schemas drift between teams and break dashboards

• You can’t quantify drop/duplicate rates

• Your upgrade path to Angular 20+ is blocked by state complexity

Relevant experience

I’ve done this across telecom, aviation, media, insurance, IoT, and SaaS. The patterns repeat; the outcomes compound.

• Telecom advertising analytics (this case)

• Airport kiosks with offline‑tolerant UX and hardware simulation

• Insurance telematics dashboards with typed WebSockets