Client-Side Observability
Real-time telemetry from your browsing session. All data stays in your browser—no backend, no tracking, no external services.
Trace Timeline
Click on any point to see detailed trace information
Why I Built This
Working on distributed systems at Grafana means thinking about observability constantly—how do we instrument services, collect telemetry, and understand system behavior? But most observability solutions assume you have servers, databases, and centralized collection pipelines.
I wanted to challenge that assumption. What if we applied the same principles to a static site deployed on Netlify? Can we get meaningful insights using only browser APIs? The answer is yes.
How It Works
1. Browser-Based Tracing
OpenTelemetry JS runs entirely in your browser, collecting traces for page loads, navigation events, resource timing (CSS, JS, images), and user interactions. Every action generates spans that follow the OpenTelemetry specification.
2. Local Storage
Instead of sending traces to a backend, they're stored in IndexedDB right in your browser. No data leaves your machine. No external services. No privacy concerns. You own your telemetry data completely.
3. Client-Side Visualization
This page reads from IndexedDB and renders a timeline view of your traces. You can see exactly how long pages took to load, which resources were slowest, and how you navigated through the site—all from your own browsing session.
4. Static Deployment
Everything is client-side JavaScript bundled with Astro and deployed as static assets to Netlify. No servers to maintain. No databases to scale. No infrastructure costs. Just pure observability as a first-class feature of the application.
What You Can Observe
The dashboard tracks page load performance (time to first byte, DOM content loaded, full page load), resource timing (how long each CSS, JS, and image took to load), navigation patterns (your journey through the site with timestamps), Web Vitals (core metrics like LCP, FID, CLS), and custom events (interactions like link clicks and theme toggles).
The Builder Philosophy
This project embodies what I love about building: taking production-grade patterns and applying them in unexpected contexts. Observability isn't just for microservices and Kubernetes clusters—it's a mindset that applies anywhere you want to understand behavior.
By building this without external dependencies, I'm showing that the principles matter more than the tools. You don't need Prometheus, Grafana Cloud, or a metrics backend to practice good observability. You just need curiosity and the right APIs.