State Debugging in Production for Angular 20+: Typed Event Schemas, NgRx DevTools Flags, Telemetry Hooks, and an Error Taxonomy That Works in the Field

Why Production State Debugging Matters Now

The Instrumented Approach: Typed Events, DevTools, and Taxonomy

// telemetry-events.ts (Angular 20+)
export type EventBase = {
  appVersion: string;
  ts: number;
  tenantId?: string;
  userId?: string; // hashed or omitted
  sessionId: string;
  device: { ua: string; os: string; width?: number; height?: number; online?: boolean };
  flags?: Record<string, boolean>; // feature flags snapshot
};

export type StateMutationEvent = EventBase & {
  type: 'state.mutation';
  store: string;        // e.g., UsersStore
  mutator: string;      // e.g., loadUsersSuccess
  prevHash: string;
  nextHash: string;
  durationMs: number;
  sizeBytes?: number;   // approximate JSON length, capped
  sample: boolean;
};

export type ActionEvent = EventBase & {
  type: 'ngrx.action';
  action: string;       // action type
  payloadSize?: number; // sanitized, size only
  sample: boolean;
};

export enum ErrorKind { Network='Network', Device='Device', Domain='Domain', Auth='Auth', UI='UI' }
export enum Severity { Info='Info', Warn='Warn', Error='Error', Critical='Critical' }
export enum ErrorCode {
  HTTP_401='HTTP_401',
  WS_RETRY_EXHAUSTED='WS_RETRY_EXHAUSTED',
  PRINTER_OFFLINE='PRINTER_OFFLINE',
  CHART_RENDER_TIMEOUT='CHART_RENDER_TIMEOUT'
}

export type ErrorEvent = EventBase & {
  type: 'error';
  code: ErrorCode;
  kind: ErrorKind;
  severity: Severity;
  message: string;          // user-safe
  context?: Record<string, unknown>; // scrubbed
};

export type TelemetryEvent = StateMutationEvent | ActionEvent | ErrorEvent;

Step-by-Step Implementation in Angular 20+

// telemetry.service.ts
import { Injectable, NgZone, inject } from '@angular/core';
import { TelemetryEvent } from './telemetry-events';

@Injectable({ providedIn: 'root' })
export class TelemetryService {
  private endpoint = '/api/telemetry';
  private readonly samplingRate = 0.1; // 10%, override via Remote Config
  private readonly maxBytes = 32_000;

  constructor(private zone: NgZone) {}

  emit(ev: TelemetryEvent) {
    if (Math.random() > this.samplingRate && ev.type !== 'error') return; // always send errors
    const payload = JSON.stringify(ev).slice(0, this.maxBytes);
    const blob = new Blob([payload], { type: 'application/json' });
    if (navigator.sendBeacon) {
      navigator.sendBeacon(this.endpoint, blob);
    } else {
      // keepalive ensures delivery on unload in modern browsers
      fetch(this.endpoint, { method: 'POST', body: blob, keepalive: true });
    }
  }
}

// users.store.ts (SignalStore)
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
import { TelemetryService } from './telemetry.service';
import { ErrorCode, ErrorKind, Severity } from './telemetry-events';

function hash(obj: unknown) {
  const s = JSON.stringify(obj);
  let h = 0; for (let i=0;i<s.length;i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0; return h.toString(16);
}

export interface UsersState { list: ReadonlyArray<{ id: string; name: string }>; loading: boolean }

export const UsersStore = signalStore(
  { providedIn: 'root' },
  withState<UsersState>({ list: [], loading: false }),
  withMethods((store) => {
    const telemetry = inject(TelemetryService);
    return {
      setLoading(loading: boolean) {
        const start = performance.now();
        const prevHash = hash({ loading: store.loading() });
        patchState(store, { loading });
        telemetry.emit({
          type: 'state.mutation',
          store: 'UsersStore',
          mutator: 'setLoading',
          prevHash, nextHash: hash({ loading: store.loading() }),
          durationMs: performance.now() - start,
          sample: true,
          appVersion: '20.2.0', ts: Date.now(), sessionId: crypto.randomUUID(),
          device: { ua: navigator.userAgent, os: 'web' }
        });
      },
      loadUsersSuccess(users: UsersState['list']) {
        const start = performance.now();
        const prevHash = hash({ count: store.list().length });
        patchState(store, { list: users, loading: false });
        telemetry.emit({
          type: 'state.mutation', store: 'UsersStore', mutator: 'loadUsersSuccess',
          prevHash, nextHash: hash({ count: store.list().length }),
          durationMs: performance.now() - start, sample: true,
          appVersion: '20.2.0', ts: Date.now(), sessionId: 's', device: { ua: navigator.userAgent, os: 'web' }
        });
      },
      handlePrinterOffline() {
        // Example of structured error event
        telemetry.emit({
          type: 'error', code: ErrorCode.PRINTER_OFFLINE, kind: ErrorKind.Device, severity: Severity.Error,
          message: 'Printer is offline. Check power and connection.',
          appVersion: '20.2.0', ts: Date.now(), sessionId: 's', device: { ua: navigator.userAgent, os: 'web' }
        });
      }
    };
  })
);

// ngrx-devtools.module.ts
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { isDevtoolsEnabled, devtoolsFeatures } from './remote-config';

export const Devtools = [
  StoreDevtoolsModule.instrument({
    maxAge: 25,
    logOnly: true, // production safe
    connectInZone: true,
    features: devtoolsFeatures(),
    actionSanitizer: (a) => ({ type: a.type }),
    stateSanitizer: (s) => ({ ...s, hugeList: '¬' })
  })
];

// telemetry-meta-reducer.ts
import { ActionReducer } from '@ngrx/store';
import { TelemetryService } from './telemetry.service';

export function telemetryMetaReducer<T>(reducer: ActionReducer<T>) {
  const telemetry = new TelemetryService(new NgZone({} as any)); // or inject via factory
  return (state: T | undefined, action: any): T => {
    const next = reducer(state, action);
    if (Math.random() < 0.05) {
      telemetry.emit({
        type: 'ngrx.action', action: action.type, payloadSize: JSON.stringify(action).length,
        sample: true, appVersion: '20.2.0', ts: Date.now(), sessionId: 's', device: { ua: navigator.userAgent, os: 'web' }
      });
    }
    return next;
  };
}

Server-Side Ingestion in Firebase

// functions/src/index.ts
import { onRequest } from 'firebase-functions/v2/https';
import * as logger from 'firebase-functions/logger';
import { getFirestore } from 'firebase-admin/firestore';
import * as admin from 'firebase-admin';
admin.initializeApp();

export const ingest = onRequest({ region: 'us-central1' }, async (req, res) => {
  try {
    const ev = req.body as any; // validate shape in real code
    if (!ev || !ev.type || !ev.ts) return res.status(400).send('invalid');

    // Truncate overly large context
    if (ev.context) {
      const s = JSON.stringify(ev.context);
      if (s.length > 4000) ev.context = { truncated: true };
    }

    const db = getFirestore();
    const day = new Date(ev.ts).toISOString().slice(0, 10);
    await db.collection('telemetry').doc(day).collection(ev.type).add(ev);

    switch (ev.type) {
      case 'error': logger.error(ev.code, { severity: ev.severity, tenant: ev.tenantId }); break;
      case 'state.mutation': logger.info('mutation', { store: ev.store, mutator: ev.mutator }); break;
      default: logger.debug('event', ev.type);
    }

    res.status(204).end();
  } catch (e) {
    logger.error('ingest_failed', e as any);
    res.status(500).end();
  }
});

How an Angular Consultant Instruments Signals and NgRx for Field Diagnostics

When to Hire an Angular Developer for Production Debugging Rescue

Privacy, Performance, and Guardrails

# .github/workflows/ci.yml (excerpt)
- name: Type-check telemetry contracts
  run: npx ts-node tools/validate-telemetry.ts

- name: Enforce bundle budgets
  run: npx ng build --configuration=production

Measurable Outcomes and Next Steps