Frontend Observability Dashboard
Real-Time Web Telemetry SDK & Source Map Exception Parser
1. Problem Statement
Monitoring production bugs is difficult because production bundles are obfuscated, leaving developer logs with unreadable, minified stack traces and incomplete user contexts.
2. Business Context & Friction
Tracking production errors and core web vitals in real-time allows developers to resolve bugs quickly and maintain high SEO rankings.
3. Learning Objectives
- Build a browser telemetry SDK that captures script errors
- Resolve minified JS stack traces back to source files using source maps
- Track Core Web Vitals performance metrics (LCP, CLS, INP)
- Implement event batching to send logs without affecting page performance
4. Functional Requirements
Browser Monitoring SDK
must-haveLightweight SDK that listens for unhandled runtime exceptions and performance metrics, sending them to server gateways.
Source Map De-obfuscation Module
must-haveParse minified stack traces on the server using source maps to locate exact file names and line numbers.
Vitals Performance Alerts
should-haveShow alerts when Core Web Vitals (LCP, CLS, INP) exceed recommended thresholds.
User Session Event Log
should-haveSave user click and navigation event flows leading up to errors to help debug issues.
5. Non-Functional Specifications
Performance
- •Telemetry SDK size must remain under 3KB gzipped to minimize page load impact.
- •Send logs using navigator.sendBeacon to avoid blocking page execution threads.
Scalability
- •Server endpoints must handle up to 5,000 log transmissions per second.
- •Store data in databases that support fast time-series telemetry queries.
Accessibility (A11y)
- •Dashboard reports must expose data in accessible tables for keyboard users.
- •Include text summaries for charts and performance ratings.
Security
- •Validate API keys on all telemetry requests to block fake logs.
- •Ensure source map files are kept secure and are not exposed to the public.
Reliability & Fault Tolerance
- •Buffer logs locally in localStorage if the telemetry server goes offline.
- •Gracefully catch parsing failures and show raw stack trace data if source maps are missing.
Observability & Telemetry
- •Expose performance diagnostics showing stack trace parsing speeds.
- •Monitor the size and delivery rates of telemetry logs.
6. Core Modules Breakdown
Browser Telemetry SDK
Client-side library that listens for errors and tracks Web Vitals performance data.
- •Intercept window error handlers
- •Track Web Vitals metrics
- •Batch and send log data using sendBeacon
Source Map Exception Resolver
Server-side component that parses minified stack traces using matching source maps.
- •Fetch matching source map files
- •Map minified lines to source code files
- •Format resolved stack trace results
Analytics Dashboard UI
Renders charts, error lists, and performance metrics reports.
- •Group and list active errors
- •Display Web Vitals performance trends
- •Show detailed error trace reports
7. Key User Flows
App encounters a runtime error
- User hits a page error, triggering the window error listener.
- SDK captures error message, stack trace, and recent events.
- SDK sends log payload to the telemetry server using sendBeacon.
Developer views error details
- Developer clicks an error item in the dashboard UI.
- Server parses the minified stack trace using matching source maps.
- Dashboard displays the resolved stack trace, showing the exact source file and line number.
8. Architectural Blueprint
frontend Architecture
- •Single Page Application dashboard built with Vite and Tailwind CSS.
- •Client-side SDK injected into target applications.
state Management
- •Zustand managing dashboard filters, error lists, and settings configurations.
data Fetching
- •Standard REST APIs for loading metrics reports and detailed error lists.
caching
- •Cache source map files in memory to speed up stack trace parsing.
- •Save telemetry logs in database cache pools.
routing
- •Vite standard internal views routing paths.
deployment
- •Deploy SDK packages to NPM registry; deploy dashboard to AWS S3 bucket behind Cloudflare.
9. Component Execution Plan
| Component | Responsibility | Notes |
|---|---|---|
| ErrorsTableList | Renders list of logged errors, grouped by incident count and status. | Supports filtering by brand and version. |
| StackTraceViewer | Renders de-obfuscated stack traces, highlighting error source lines. | Displays raw data if source maps are missing. |
| WebVitalsChart | Renders line charts showing LCP, CLS, and INP performance trends. | Highlights status levels (Good, Needs Improvement, Poor). |
10. API Specifications
Send telemetry details from the SDK to the logging gateway.
{
"message": "Null pointer exception",
"stack": "at main.min.js:1:320",
"url": "/home"
}{
"status": "logged"
}11. Logical Data Schemas
TelemetryEvent
Database schema details for telemetry logs.
12. Curriculum Milestones
SDK Listeners Setup
- •Build base telemetry SDK module.
- •Intercept window error events and track Core Web Vitals.
Logging Gateway API
- •Create Express logging server endpoint.
- •Save incoming telemetry log data in local databases.
Source Map Parser Engine
- •Implement source map parser utility.
- •Resolve minified stack traces back to source files.
Log Batching & Alerts
- •Implement navigator.sendBeacon log batching.
- •Add email and Slack alerts for Web Vitals threshold failures.
Telemetry Architecture Guide
- •Document SDK integration guidelines.
- •Prepare system design interview answers explaining telemetry capture.
13. Technical Execution Roadmap
Build SDK error interceptors
Create library listeners that capture unhandled errors.
Create server logging endpoints
Set up Express server routes to receive telemetry payloads.
Implement stack trace resolver
Write utility functions to parse stack traces using source maps.
Develop analytics dashboard UI
Build charts and tables to display logs and Web Vitals.
14. Systems Interview Deep Dive
Elevator Pitch
“I designed a frontend observability platform with a 3KB SDK that tracks errors and Web Vitals, and a server-side parser that uses source maps to de-obfuscate stack traces in real-time.”
Architecture Summary
The SDK batches logs and sends them using sendBeacon to avoid blocking the main thread. The server parses minified stack traces using cached source maps, exposing clean error paths.
Architectural Tradeoffs
- ▲Parsing source maps on the server increases memory usage, which we resolve by caching files.
- ▲Logging all errors can be expensive, so we implement client-side sampling (e.g., logging only 5% of successful users).
Possible Follow-up Questions
- ?Explain how navigator.sendBeacon differ from standard fetch APIs.
- ?How do you track user interactions without slowing down the page?
15. Future Enhancements
- Add user session video replay capabilities.
- Incorporate automated source map uploads via CI/CD webhooks.
16. Future Integration Links
GitHub Repository
Access to source code files is planned for later.
Live Demo Application
Interactive live deployment sandbox environment.
Project Documentation
Detailed setup, guidelines and design patterns docs.