Skip to content

feat: Implement Event Inspector and Testing App - #4

Draft
fateeand wants to merge 55 commits into
mainfrom
1-create-an-embedded-developer-diagnostics-panel-in-the-library
Draft

fateeand wants to merge 55 commits into
mainfrom
1-create-an-embedded-developer-diagnostics-panel-in-the-library

Conversation

@fateeand

@fateeand fateeand commented Oct 7, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Adds a developer diagnostics panel to the Angular library, and a testing app to exercise it.

  • Event Inspector (@absaoss-cps/ngx-ui-watchtower/event-inspector): an opt-in secondary entry that shows, live, what the library hands to its telemetry destinations: logs, BI events, scenarios and errors, with their payloads. Developer tool only; nothing is sent anywhere.
  • Watchtower Lab (projects/watchtower-lab, never published): a test application with a mock RUM/log backend. It drives every feature of the library (logging, BI, scenarios, identity, broadcast between a shell and a Web Fragments fragment, RUM settings) and is what the Playwright suite runs against.

Closes #1

Enabling the inspector

import { provideUwtEventInspector } from '@absaoss-cps/ngx-ui-watchtower/event-inspector';

providers: [provideUwtEventInspector()];

Press Shift+E+I to open it. captureBeforeOpen, maxEventsPerSection, maxPayloadCharsInView and the shortcuts are configurable; see the package README. The entry is lazy, so apps that don't import it pay nothing.

Changes

  • Library, main entry
    • New read-only UwtTelemetryMonitor (events$), fed after each hand-off to a destination with a deep copy of the payload. Hook sites: scenarios, BI, logger, scenario telemetry service, and the broadcast host.
    • New public observed-event types.
  • Library, /event-inspector entry: provideUwtEventInspector, UwtEventInspectorService, config token and defaults.
  • Library, /rum entry: when RUM rejects recordError because its errors telemetry isn't loaded, the sink prints one console warning (in every environment) and doesn't mirror the error. It never edits the app's RUM config. Add 'errors' to telemetries, or set mirrorErrorsToRum: false.
  • Lab, Playwright, smoke test, CI
    • npm run lab (http://localhost:4280), npm run lab:build, npm run e2e / e2e:ui, npm run smoke (an isolated consumer app that installs the packed libraries).
    • checks.yml runs the new checks.
  • Workspace: Angular bumped to 21.2 (needed by cps-ui-kit); new dev dependencies for the lab, SSR and Playwright.

Compatibility

  • No breaking change. The inspector is opt-in; the monitor is additive.
  • New optional peer dependencies, needed only by the inspector: cps-ui-kit >=21.32.0 <23, @angular/forms, @angular/animations.
  • cps-ui-kit currently requires Angular 21.2 or later to install, so inspector users need that too.

How to verify

npm ci
npm run lint && npm run format:check && npm run typecheck
npm run test:coverage   # 1013 tests; statements 97%, branches 92%, functions 97%, lines 97%
npm run build
npm run e2e             # 264 passed, 2 skipped (Chromium and WebKit)
npm run smoke

Run on this branch: all pass.

Heads-up

#34 moves the telemetry hook points into the new framework-independent core. Either PR will be reworked on top of the other.

@fateeand fateeand linked an issue Oct 7, 2026 that may be closed by this pull request
@github-actions

github-actions Bot commented Oct 7, 2026 •

Copy link
Copy Markdown
Contributor

Coverage report

St.❔
Category Percentage Covered / Total
🟢 Statements
97.07% (-0.07% 🔻)
2648/2728
🟢 Branches
92.49% (-2.94% 🔻)
1294/1399
🟢 Functions
96.75% (-0.35% 🔻)
684/707
🟢 Lines
97.31% (-0.17% 🔻)
2528/2598
Show new covered files 🐣
St.❔
File Statements Branches Functions Lines
🟢
... / uwt-telemetry-monitor.service.ts
100% 100% 100% 100%
🟢
... / uwt-inspector.models.ts
100% 100% 100% 100%
🟢
... / uwt-inspector.component.ts
98.26% 92.31% 100% 98.13%
🟢
... / cps-slider.component.ts
100% 62.5% 90.91% 100%
🟢
... / uwt-inspector-store.ts
99.35% 93.55% 100% 99.27%
🟢
... / uwt-inspector-filter.ts
97.56% 94.83% 100% 97.4%
🟢
... / uwt-inspector-export.ts
97.14% 92.86% 87.5% 100%
🟢
... / uwt-inspector-ring.ts
100% 100% 100% 100%
🟢
... / uwt-inspector-timeline.component.ts
98% 87.18% 97.06% 98.94%
🟢
... / uwt-inspector-json.component.ts
91.18% 66.67% 88.89% 93.75%
🟢
... / uwt-inspector-filter-bar.component.ts
98.25% 76.19% 100% 98.11%
🟢
... / uwt-inspector-exporter.ts
83.33% 60% 88.89% 82.5%
🟢
... / uwt-inspector-rows.ts
89.47% 85.71% 100% 89.29%
🟢
... / uwt-inspector-shortcut.ts
100% 96.77% 100% 100%
🟢
... / uwt-inspector-dock-switcher.component.ts
100% 88.89% 100% 100%
🟢
... / uwt-inspector-logo.component.ts
100% 100% 100% 100%
🟢
... / uwt-inspector-session.ts
100% 100% 100% 100%
🟢
... / uwt-inspector-preferences.ts
100% 100% 100% 100%
🟢
... / uwt-inspector-internal.util.ts
84.21% 50% 80% 84.21%
🟢
... / uwt-inspector-window.ts
95.35% 86.36% 80% 96.43%
🟢
... / uwt-event-inspector.service.ts
98.06% 96.97% 95.45% 97.95%
🟢
... / uwt-inspector-pane.component.ts
98.55% 72.5% 100% 98.53%
🟢
... / uwt-inspector.providers.ts
84.62% 87.5% 60% 84.62%
Show files with reduced coverage 🔻
St.❔
File Statements Branches Functions Lines
🟢
... / uwt-broadcast-host.service.ts
96.95% (+0.34% 🔼)
93.24% (-0.09% 🔻)
100%
96.85% (+0.39% 🔼)
🟢
... / uwt-rum-telemetry.sink.ts
96.62% (+0.12% 🔼)
93.05% (-0.32% 🔻)
95.38% (+0.15% 🔼)
97.58% (+0.09% 🔼)

Test suite run success

1023 tests passing in 44 suites.

Report generated by 🧪jest coverage report action from 423b829

@fateeand fateeand changed the title feat: add diagnostics popup feat: Implement Event Inspector and Testing App Nov 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create an Embedded Developer Diagnostics Panel and Testing Application

1 participant