[Observability] Integrate Sentry Error Tracking, User Analytics, and Real User Monitoring

[KarenZita01]

Description

The frontend has no monitoring, analytics, or error tracking. In production, there is no visibility into application health, user behavior, or error frequency. For a decentralized application handling financial data, monitoring is essential for user trust and operational excellence.

Monitoring gaps:

• No error tracking (Sentry, LogRocket)
• No user analytics (PostHog, Plausible, Umami)
• No performance monitoring (RUM, Web Vitals)
• No feature usage tracking
• No custom event tracking for blockchain operations
• No session recording for debugging
• No uptime monitoring
• No alert system for error spikes
• No privacy-compliant analytics (GDPR, cookie-free option)

Technical Context & Impact

• Affected Components/Files: src/lib/monitoring/ (missing), src/lib/analytics/ (missing)
• Impact: Blind to production issues; cannot measure user engagement or diagnose errors

Step-by-Step Implementation Guide

1. Set up Sentry: npm install @sentry/nextjs:
   • Create sentry.client.config.ts, sentry.server.config.ts, sentry.edge.config.ts
   • Configure DSN from env var NEXT_PUBLIC_SENTRY_DSN
   • Add Sentry.withSentryConfig in next.config.ts
   • Set up error boundary that reports to Sentry
   • Configure performance tracing (30% sample rate)
   • Add release tracking for source maps
2. Set up analytics: Install PostHog or Plausible:
   • Create src/lib/analytics/AnalyticsProvider.tsx
   • Track page views (automatic via Next.js router)
   • Track custom events: connectWallet, registerMeter, createStream, submitReading
   • Track transaction outcomes (success/failure + time)
   • Respect Do Not Track header for privacy
3. Implement RUM (Real User Monitoring): src/lib/monitoring/web-vitals.ts:
   • Report LCP, FID, CLS, INP, TTFB
   • Tag reports with page path, device type, connection type
4. Create Monitoring Dashboard module: (for development):
   • Show error count, active users, page views
   • Filter by time range, error type, user
5. Add session replay: Sentry session replay or LogRocket for debugging user sessions
6. Set up alerts: Configure Sentry alert rules for:
   • Error frequency spike (>100% increase in 1 hour)
   • New error type that hasn't appeared before
   • Core Web Vitals degradation
7. Implement privacy controls: Cookie consent banner, data anonymization, opt-out mechanism

Verification & Testing Steps

1. Trigger a test error -> verify it appears in Sentry dashboard within 2 minutes
2. Navigate through app -> verify page views appear in analytics
3. Complete a transaction -> verify custom event appears in analytics
4. Verify privacy controls: enable Do Not Track -> verify no analytics sent
5. Check Web Vitals are reported in Sentry Performance tab
6. Verify source maps are uploaded for production error debugging