diff --git a/apps/manacore/apps/landing/src/content/devlog/2026-03-22-analytics-pwa-visualizer-error-tracking.md b/apps/manacore/apps/landing/src/content/devlog/2026-03-22-analytics-pwa-visualizer-error-tracking.md new file mode 100644 index 000000000..518e77ed3 --- /dev/null +++ b/apps/manacore/apps/landing/src/content/devlog/2026-03-22-analytics-pwa-visualizer-error-tracking.md @@ -0,0 +1,281 @@ +--- +title: 'Analytics, PWA, Visualizer & Error Tracking' +description: 'Umami-Analytics für alle Apps zentralisiert, PWA auf Vite-Plugin migriert, Mukke-Visualizer mit Butterchurn & pixi.js, Browser Error Tracking für 19 Web-Apps.' +date: 2026-03-22 +author: 'Till Schneider' +category: 'feature' +tags: + [ + 'analytics', + 'umami', + 'pwa', + 'vite-pwa', + 'mukke', + 'visualizer', + 'butterchurn', + 'pixi', + 'error-tracking', + 'glitchtip', + 'csp', + 'security', + 'storage', + 'calendar', + ] +featured: true +commits: 26 +readTime: 12 +stats: + filesChanged: 242 + linesAdded: 5493 + linesRemoved: 2856 +contributors: + - name: 'Till Schneider' + handle: 'Till-JS' + commits: 26 +workingHours: + start: '2026-03-22T11:00' + end: '2026-03-23T11:00' +--- + +Produktiver Tag mit **26 Commits** über das gesamte Monorepo: + +- **Analytics** - Umami-Tracking zentralisiert + Event-Tracking für alle Apps und Landing Pages +- **PWA** - Custom Service Workers durch Vite PWA Plugin ersetzt +- **Mukke Visualizer** - Pluggable System mit Butterchurn (Milkdrop) und Particle (pixi.js) +- **Error Tracking** - Browser-seitiges GlitchTip für alle 19 SvelteKit Web-Apps +- **Security** - Einheitliche CSP-Headers für alle 17 Web-Apps +- **Infrastruktur** - Storage Deployment, Calendar Fixes, URL-Migration + +--- + +## Analytics: Umami-Tracking zentralisiert + +Komplette Überarbeitung des Analytics-Setups über alle Apps hinweg. + +### Zentralisierung via Environment Variables + +Statt hartcodierter Umami-Script-Tags in jeder App wird das Tracking jetzt über Env-Vars und eine Shared Utility gesteuert. + +```typescript +// Vorher: Hartcodiertes Script in jeder app.html + + +// Nachher: Zentral über hooks.server.ts +import { injectUmamiScript } from '@manacore/shared-analytics'; +``` + +### Event-Tracking für Web-Apps + +Key Actions in den wichtigsten Apps werden jetzt automatisch getrackt: + +| App | Getrackte Events | +| ------------ | ------------------------------------- | +| **Todo** | Task erstellen, abhaken, löschen | +| **Calendar** | Event erstellen, bearbeiten | +| **Chat** | Nachricht senden, Conversation öffnen | +| **Contacts** | Kontakt erstellen, bearbeiten | +| **Picture** | Bild generieren | +| **Storage** | Datei hochladen, herunterladen | +| **Clock** | Timer starten, Alarm setzen | +| **Mukke** | Song abspielen | +| **Planta** | Pflanze hinzufügen, gießen | + +### CTA-Tracking für Landing Pages + +Alle 10 Astro Landing Pages tracken jetzt automatisch CTA-Button-Klicks via Umami Events. + +--- + +## PWA: Migration auf Vite PWA Plugin + +### Vorher + +Jede App hatte einen handgeschriebenen Service Worker mit manueller Cache-Verwaltung — fehleranfällig und schwer wartbar. + +### Nachher + +```bash +pnpm add -D @vite-pwa/sveltekit +``` + +Zentralisierte Offline-Seite und automatisches Caching via Workbox. Service Worker werden jetzt vom Plugin generiert mit: + +- **Precaching** für Shell-Assets +- **Runtime Caching** mit Stale-While-Revalidate für API-Calls +- **Offline Fallback** auf einheitliche Offline-Seite + +Dazu passend: No-Cache-Headers für PWA-relevante Dateien (`manifest.webmanifest`, `sw.js`) in der Caddyfile, damit Updates sofort greifen. + +--- + +## Mukke: Pluggable Visualizer System + +Das bisherige statische `FrequencyBars`-Visualizer wurde durch ein modulares System mit drei Backends ersetzt. + +### Architektur + +``` +┌─────────────────────────────────────────────┐ +│ FullPlayer.svelte │ +│ ┌───────────────────────────────────────┐ │ +│ │ VisualizerRenderer.svelte │ │ +│ │ ┌─────────┐ ┌──────────┐ ┌────────┐ │ │ +│ │ │ Bars │ │Butterchurn│ │Particle│ │ │ +│ │ │ (Canvas)│ │ (WebGL) │ │(pixi.js)│ │ │ +│ │ └─────────┘ └──────────┘ └────────┘ │ │ +│ │ ▲ ▲ ▲ │ │ +│ │ └──────────┼──────────┘ │ │ +│ │ registry.svelte.ts │ │ +│ └───────────────────────────────────────┘ │ +│ ▲ │ +│ analyzer.ts │ +│ (Web Audio API Singleton) │ +└─────────────────────────────────────────────┘ +``` + +### Visualizer Modes + +| Mode | Technologie | Beschreibung | +| ------------------ | ---------------- | ------------------------------------------------------------------------- | +| **Frequency Bars** | Canvas 2D | Klassischer Equalizer mit logarithmischer Frequenzverteilung | +| **Butterchurn** | WebGL (Milkdrop) | 500+ Presets, Shader-basierte Visualisierungen mit Blend-Transitions | +| **Particles** | pixi.js (GPU) | 200 Partikel mit Bass-Reaktion, Spektrum-Farbgebung, Gravitations-Effekte | + +### Lazy Loading + +Butterchurn (~2MB) und pixi.js werden erst geladen, wenn der User den Visualizer wechselt: + +```typescript +// ButterchurnViz.svelte +const Butterchurn = await import('butterchurn'); +const getPresets = (await import('butterchurn-presets')).default; +``` + +### Registry & Switcher + +```typescript +// registry.svelte.ts — Svelte 5 Runes Store +let active = $state('bars'); + +export const visualizerStore = { + get active() { + return active; + }, + setActive(id: VisualizerType) { + active = id; + }, + next() { + /* cycle through visualizers */ + }, + previous() { + /* cycle backwards */ + }, +}; +``` + +Der `VisualizerRenderer` zeigt Switcher-Buttons oben rechts für den schnellen Wechsel zwischen den Modi. + +--- + +## Error Tracking: Browser-Integration + +### Shared Package erweitert + +Neuer `@manacore/shared-error-tracking/browser` Export mit `@sentry/browser` für Client-seitiges Error Tracking via GlitchTip. + +```typescript +// hooks.client.ts (in jeder der 19 Web-Apps) +import { initErrorTracking, handleSvelteError } from '@manacore/shared-error-tracking/browser'; +import type { HandleClientError } from '@sveltejs/kit'; + +initErrorTracking({ + serviceName: 'chat-web', + dsn: (window as any).__PUBLIC_GLITCHTIP_DSN__, + environment: import.meta.env.MODE, +}); + +export const handleError: HandleClientError = ({ error }) => { + handleSvelteError(error); +}; +``` + +### Alle 19 Web-Apps angebunden + +| Apps | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Calendar, Chat, Clock, Contacts, Context, Manacore, ManaDeck, Matrix, Mukke, NutriPhi, Photos, Picture, Planta, Presi, Questions, Skilltree, Storage, Todo, Zitare | + +### API + +| Funktion | Beschreibung | +| --------------------- | ------------------------------- | +| `initErrorTracking()` | Sentry/GlitchTip initialisieren | +| `handleSvelteError()` | SvelteKit Error Handler | +| `captureException()` | Manuell Fehler melden | +| `captureMessage()` | Info/Warning/Error Messages | +| `setUser()` | User-Kontext setzen | +| `setTag()` | Custom Tags für Filtering | + +--- + +## Security: Einheitliche CSP-Headers + +Content Security Policy für alle 17 Web-Apps vereinheitlicht. Die CSP erlaubt: + +- Self-hosted Assets und Inline-Styles +- Umami Analytics (`umami.mana.how`) +- Supabase API-Calls +- WebSocket-Verbindungen + +--- + +## Weitere Änderungen + +### Manacore App Hub + +Neues App Hub als Default-Startseite für die Manacore Web-App — zeigt alle verfügbaren Apps im Ökosystem. + +### Calendar Fixes + +- Auto-Scroll zur aktuellen Uhrzeit beim Öffnen +- Zeitanzeige am roten Indikator +- Auth Gate gegen 401-Fehler bei nicht eingeloggten Usern + +### Storage Deployment + +- Storage App in die CD-Pipeline aufgenommen +- Docker-Konfiguration mit Runtime Env-Vars statt hartcodierten URLs +- Patches-Directory im Dockerfile für pnpm install + +### URL-Migration + +Alle `manacore.app` URLs im Codebase durch `mana.how` ersetzt. + +### Observability Gaps Dokumentation + +Neues Dokument analysiert fehlende Monitoring-Bereiche: Distributed Tracing, Log-Aggregation, APM und Frontend Error Monitoring. + +--- + +## Zusammenfassung + +| Bereich | Commits | Highlights | +| -------------------- | ------- | ------------------------------------------------- | +| **Analytics** | 6 | Umami zentralisiert, Event-Tracking, CTA-Tracking | +| **PWA** | 1 | Vite PWA Plugin, einheitliche Offline-Seite | +| **Mukke Visualizer** | 3 | Butterchurn, Particles, Registry/Switcher | +| **Error Tracking** | 4 | Browser-Modul, 19 Web-Apps, Docs | +| **Security** | 1 | CSP-Headers für 17 Web-Apps | +| **Calendar** | 2 | Auto-Scroll, Auth Gate | +| **Storage** | 4 | CD-Pipeline, Docker, Env-Vars | +| **Infrastruktur** | 3 | URL-Migration, Caddyfile, App Hub | +| **Docs** | 2 | Observability Gaps, Visualizer-Konzept | + +--- + +## Nächste Schritte + +1. **GlitchTip Frontend-Projekte** - Separate Projekte für Browser-Errors in GlitchTip anlegen +2. **Mukke Visualizer Testing** - Live-Test mit Audio-Wiedergabe +3. **Log-Aggregation** - Loki oder ähnliches evaluieren (siehe Observability Gaps) +4. **PWA Testing** - Offline-Funktionalität über alle Apps verifizieren