Sub-Issue #144.2: Offline Analytics & Telemetry #167
Description
Description
Implement offline telemetry infrastructure for Progressive Web App (PWA) Phase 3 with privacy-first design.
Architectural Decision: Opt-in Diagnostics (DSGVO-konform)
Based on SecPal's privacy-first mission as a password manager, we implement analytics as local-only diagnostics:
- ✅ All data stays on device (IndexedDB)
- ✅ No automatic server upload
- ✅ No consent banners needed
- ✅ User can manually export diagnostics for support
- ✅ GDPR compliant (no personal data processing)
Implementation Scope
Core Features (Included in PR #170)
1. Web Vitals Integration
Track performance metrics locally:
- CLS (Cumulative Layout Shift) - Visual stability
- INP (Interaction to Next Paint) - Responsiveness
- LCP (Largest Contentful Paint) - Loading performance
- FCP (First Contentful Paint) - Perceived load speed
- TTFB (Time to First Byte) - Server response time
Privacy: Metrics stored in local IndexedDB only, never uploaded automatically.
2. Error Boundary
React Error Boundary with automatic error capture:
- Catches rendering errors
- Stores errors locally for debugging
- Graceful fallback UI
- Component stack traces
Privacy: Errors stay local, can be manually exported if user wants support.
Features Intentionally Excluded (Privacy Reasons)
These were originally in the issue description but conflict with privacy-first design:
- ❌ GDPR Consent Banner - Not needed (no data leaves device)
- ❌ Server Upload / Backend Integration - Against privacy philosophy
- ❌ User Tracking / Engagement Metrics - Not aligned with password manager values
- ❌ Automatic Sync - User must explicitly export data
Rationale: For a password manager, even anonymous analytics create user distrust. Our approach gives users complete control.
Privacy-First Design Principles
What We DON'T Do
- ❌ No automatic data upload to servers
- ❌ No tracking cookies
- ❌ No consent banners
- ❌ No third-party analytics services
- ❌ No PII collection
- ❌ No user profiling
What We DO
- ✅ Store diagnostics locally in IndexedDB
- ✅ User has full control (can clear data anytime)
- ✅ Optional manual export for support cases
- ✅ Transparent about what data exists
GDPR Compliance
- Lawful Basis: Not needed (no processing of personal data)
- Consent: Not needed (data never leaves device)
- Right to Erasure: User can clear IndexedDB anytime
- Data Minimization: Only technical metrics, no PII
- Storage Limitation: Auto-cleanup after 30 days
Future Enhancement: Diagnostic Report Generator
Planned for future PR (not #170):
// User clicks "Export Diagnostics" in Settings
const report = await generateDiagnosticReport();
// Returns: { errors: [...], performance: [...], browser: {...} }
// User decides whether to share with supportThis allows users to help with bug reports on their terms, without automatic tracking.
Related
Part of: #144 (PWA Phase 3 - Remaining Features)
PR: #170
Acceptance Criteria
- Web Vitals metrics tracked locally
- Error Boundary captures React errors locally
- All data stored in IndexedDB only
- No automatic server uploads
- No consent banners (not needed)
- 100% test coverage for new features
- TypeScript strict mode compliant
- ESLint clean
- GDPR compliant (no personal data processing)
- Future: Manual diagnostic export feature (separate PR)
Philosophy: Diagnostics for developers, privacy for users. No compromises.