This page is watching itself

A live observability layer built directly into the browser. Navigation Timing, Resource Timing, font readiness, runtime errors, and user clicks all feed the dashboard you are looking at right now.

Live browser telemetry only. No mocked metrics.
Page Health Gathering navigation timing...
DOM Content Loaded
-- ms

Parser, markup, and deferred scripts.

Full Page Load
-- ms

Waiting for the final load event.

Resources Loaded
-- count

Resource Timing entries observed.

Transfer Size
-- KB

Summed from transferSize across resources.

Resource Waterfall Reading PerformanceResourceTiming entries...

Every bar below is positioned from real startTime and duration values, sorted exactly the way DevTools would line them up on a network timeline.

Waiting for resource timing data...
Console Logger Structured lifecycle events from this page
Booting structured logger...

What this proves

Real-time observability

The numbers above come from live browser telemetry, refreshed from performance and session events rather than static screenshots or mocked JSON.

Performance API mastery

Navigation Timing and Resource Timing expose domContentLoadedEventEnd, loadEventEnd, startTime, duration, and transferSize for real diagnostics.

Structured logging patterns

The terminal stream writes JSON entries with timestamp, level, message, and optional meta payloads the same way production apps do.

Alerting and threshold monitoring

Alert rules evaluate real runtime values against clear thresholds, turning browser measurements into operational signals instead of passive charts.

Dashboard design

Information hierarchy matters: metrics first, timeline center-stage, logs below, and rule status alongside. Visual encoding carries meaning before the visitor reads prose.

Production debugging mindset

This layer treats the page like a system under observation. Instrumentation, event capture, rule evaluation, and resource triage are all part of operating software responsibly.