State Debugging in Production with Angular 20+: Typed Event Schemas, NgRx DevTools Hygiene, Telemetry Hooks, and an Error Taxonomy that Survives the Field

A Dashboard Freeze and No Repro: What I Actually Log

Why Production State Debugging Is Hard in Angular 20+

Typed Event Schemas That Don’t Rot

// telemetry/events.ts
import { z } from 'zod';

export type Correlation = {
  correlationId: string;   // uuid v4
  tenantId?: string;       // hashed
  routeId?: string;        // e.g., /dash/ads -> DASH_ADS
  featureFlags?: string[]; // active flags
  sessionId?: string;      // anon session
};

export type EventBase = {
  ts: number;              // epoch ms
  app: 'ads-analytics' | 'kiosk' | 'telematics';
  env: 'dev' | 'staging' | 'prod';
  correlation: Correlation;
};

export type UiEvent = EventBase & {
  type: 'ui.click' | 'ui.route' | 'ui.visibility';
  name: string;            // button id, route name
};

export type StoreEvent = EventBase & {
  type: 'state.ngrx' | 'state.signal';
  slice: string;           // e.g., charts, session
  mutation: string;        // e.g., setRange, addSeries
  size?: number;           // items affected
};

export type NetEvent = EventBase & {
  type: 'net.request' | 'net.response' | 'net.ws';
  url: string;
  status?: number;
  bytes?: number;
  retry?: number;
};

export type ErrorSeverity = 'info' | 'warn' | 'error' | 'fatal';
export type ErrorCode =
  | 'NET.TIMEOUT'
  | 'API.4XX'
  | 'API.5XX'
  | 'UI.SSR.HYDRATION'
  | 'WS.BACKPRESSURE'
  | 'STATE.STOMPED'
  | 'DEVICE.PRINTER.OFFLINE';

export type ErrorEvent = EventBase & {
  type: 'err';
  code: ErrorCode;
  message: string;         // redacted, templated
  severity: ErrorSeverity;
  recoverable: boolean;
  context?: Record<string, string | number | boolean>;
};

export type TelemetryEvent = UiEvent | StoreEvent | NetEvent | ErrorEvent;

// Runtime validator: reject anything off-schema
export const TelemetryZ = z.discriminatedUnion('type', [
  z.object({ type: z.enum(['ui.click','ui.route','ui.visibility']), name: z.string() }),
  z.object({ type: z.enum(['state.ngrx','state.signal']), slice: z.string(), mutation: z.string(), size: z.number().optional() }),
  z.object({ type: z.enum(['net.request','net.response','net.ws']), url: z.string(), status: z.number().optional(), bytes: z.number().optional(), retry: z.number().optional() }),
  z.object({ type: z.literal('err'), code: z.string(), message: z.string(), severity: z.enum(['info','warn','error','fatal']), recoverable: z.boolean(), context: z.record(z.any()).optional() })
]).and(z.object({
  ts: z.number(),
  app: z.enum(['ads-analytics','kiosk','telematics']),
  env: z.enum(['dev','staging','prod']),
  correlation: z.object({ correlationId: z.string(), tenantId: z.string().optional(), routeId: z.string().optional(), featureFlags: z.array(z.string()).optional(), sessionId: z.string().optional() })
}));

export function redact<T extends TelemetryEvent>(e: T): T {
  // Example: strip querystrings, truncate messages, remove PII keys
  if ((e as any).url) (e as any).url = (e as any).url.split('?')[0];
  if ((e as any).message) (e as any).message = (e as any).message.slice(0, 200);
  return e;
}

Telemetry Hooks for NgRx, SignalStore, and WebSockets

// app/store/telemetry.meta-reducer.ts
import { ActionReducer, INIT, META_REDUCERS } from '@ngrx/store';
import { inject, Injectable, Provider } from '@angular/core';
import { TelemetryService } from '../telemetry/telemetry.service';

@Injectable({ providedIn: 'root' })
export class TelemetryMetaReducerFactory {
  private telem = inject(TelemetryService);

  create<S>(reducer: ActionReducer<S>): ActionReducer<S> {
    let lastSent = 0;
    return (state, action) => {
      const next = reducer(state, action);
      const now = Date.now();
      const prod = this.telem.env() === 'prod';
      const enabled = this.telem.flag('telemetry');
      const sampleOk = now - lastSent > 200; // 5/sec

      if (prod && enabled && action.type !== INIT && sampleOk) {
        this.telem.emit({
          type: 'state.ngrx',
          slice: action.type.split(' ')[0]?.toLowerCase() ?? 'unknown',
          mutation: action.type,
          ts: now,
          app: this.telem.app(),
          env: this.telem.env(),
          correlation: this.telem.correlation()
        });
        lastSent = now;
      }
      return next;
    };
  }
}

export const TELEMETRY_META_REDUCER: Provider = {
  provide: META_REDUCERS,
  multi: true,
  deps: [TelemetryMetaReducerFactory],
  useFactory: (f: TelemetryMetaReducerFactory) => [f.create.bind(f)]
};

// app/stores/session.store.ts (SignalStore)
import { SignalStore, withState, patchState } from '@ngrx/signals';
import { effect, inject } from '@angular/core';
import { TelemetryService } from '../telemetry/telemetry.service';

interface SessionState { rangeDays: number; series: number; }

export class SessionStore extends SignalStore(withState<SessionState>({ rangeDays: 7, series: 0 })) {
  private telem = inject(TelemetryService);

  // Derived signal: total series count buckets
  readonly bucket = this.select(s => (s.series > 1000 ? 'huge' : s.series > 200 ? 'large' : 'small'));

  // Emit a telemetry event when bucket changes
  private trackBucket = effect((prev: string | undefined) => {
    const b = this.bucket();
    if (prev && prev !== b) {
      this.telem.emit({
        type: 'state.signal', slice: 'session', mutation: `bucket:${prev}->${b}`,
        ts: Date.now(), app: this.telem.app(), env: this.telem.env(), correlation: this.telem.correlation()
      });
    }
    return b;
  });
}

// app/telemetry/telemetry.service.ts
import { Injectable } from '@angular/core';
import { TelemetryEvent, TelemetryZ, redact } from './events';

@Injectable({ providedIn: 'root' })
export class TelemetryService {
  private endpoint = '/api/telem';
  private flags = new Set<string>(['telemetry']);
  private corr = { correlationId: crypto.randomUUID(), featureFlags: [], sessionId: crypto.randomUUID() };

  env(): 'dev'|'staging'|'prod' { return (window as any)['__env']?.env ?? 'prod'; }
  app(): 'ads-analytics'|'kiosk'|'telematics' { return (window as any)['__env']?.app ?? 'ads-analytics'; }
  correlation() { return this.corr; }
  flag(name: string) { return this.flags.has(name); }

  emit(e: TelemetryEvent) {
    const parsed = TelemetryZ.safeParse(redact(e));
    if (!parsed.success) return;
    navigator.sendBeacon?.(this.endpoint, JSON.stringify(parsed.data));
  }
}

// WebSocket backpressure monitor
const ws = new WebSocket(url);
let backlog = 0, lastTs = Date.now();
ws.onmessage = (ev) => {
  backlog++;
  queueMicrotask(() => {
    // process message...
    backlog--;
    if (Date.now() - lastTs > 1000) {
      telemetry.emit({ type: 'net.ws', url, bytes: ev.data?.length ?? 0, ts: Date.now(), app, env, correlation });
      if (backlog > 1000) telemetry.emit({ type: 'err', code: 'WS.BACKPRESSURE', message: 'queue>1000', severity: 'warn', recoverable: true, ts: Date.now(), app, env, correlation });
      lastTs = Date.now();
    }
  });
};

NgRx DevTools in Production—Without Shooting Yourself in the Foot

// app.module.ts
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrument({
      name: 'ads-analytics',
      maxAge: 50,
      logOnly: true, // never allow time-travel writes in prod
      serialize: { options: true },
      actionSanitizer: (a) => ({ type: a.type }),
      stateSanitizer: (s: any) => ({
        ...s,
        session: { ...s.session, user: 'REDACTED' },
      }),
    }),
  ],
})
export class AppModule {}

Design an Error Taxonomy That Ops and Engineering Both Use

// error/taxonomy.ts
export const mapToTaxonomy = (err: unknown): { code: ErrorCode; severity: ErrorSeverity; recoverable: boolean; } => {
  if (isTimeout(err)) return { code: 'NET.TIMEOUT', severity: 'warn', recoverable: true };
  if (isHydration(err)) return { code: 'UI.SSR.HYDRATION', severity: 'error', recoverable: true };
  if (isBackpressure(err)) return { code: 'WS.BACKPRESSURE', severity: 'warn', recoverable: true };
  if (isApi5xx(err)) return { code: 'API.5XX', severity: 'error', recoverable: true };
  return { code: 'STATE.STOMPED', severity: 'error', recoverable: false };
};

export function report(err: unknown, ctx: Record<string, any> = {}) {
  const { code, severity, recoverable } = mapToTaxonomy(err);
  telemetry.emit({
    type: 'err', code, severity, recoverable,
    message: String((err as any)?.message ?? err).slice(0, 200),
    context: ctx,
    ts: Date.now(), app, env, correlation
  });
}

CI Guardrails: Source Maps and Firebase/BigQuery Sinks

name: build-and-upload-sourcemaps
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx build web --configuration=production --source-map=true
      - name: Upload Source Maps
        run: |
          curl -X POST "$SOURCEMAP_UPLOAD_URL" \
            -H "X-Release: $GITHUB_SHA" \
            -F "files=@dist/apps/web/main.*.js.map"
        env:
          SOURCEMAP_UPLOAD_URL: ${{ secrets.SOURCEMAP_UPLOAD_URL }}

Field Results: Telecom Dashboards and Airline Kiosks

When to Hire an Angular Developer for Production Debugging and Telemetry

How an Angular Consultant Designs an Error Taxonomy

Practical Takeaways and Next Steps

• Define typed event schemas and validate at runtime to keep logs clean and queryable.

• Add NgRx meta‑reducer and SignalStore effects to emit lightweight, redacted telemetry.

• Configure NgRx DevTools with logOnly and sanitizers; gate visibility with feature flags.

• Standardize an error taxonomy; ship source maps; correlate with tenant/route/flags.

• Build a field diagnostics view (BigQuery/Firebase) and rehearse incident playbooks.

If you want this wired into your Angular 20+ app quickly, I’m available as a remote Angular expert. Let’s review your telemetry and Signals setup and cut MTTR before your next incident.