Analytics, PWA, Visualizer & Error Tracking

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.

// Vorher: Hartcodiertes Script in jeder app.html
<script defer src="https://umami.mana.how/script.js" data-website-id="abc-123"></script>

// 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:

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

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

Lazy Loading

Butterchurn (~2MB) und pixi.js werden erst geladen, wenn der User den Visualizer wechselt:

// ButterchurnViz.svelte
const Butterchurn = await import('butterchurn');
const getPresets = (await import('butterchurn-presets')).default;

Registry & Switcher

// registry.svelte.ts — Svelte 5 Runes Store
let active = $state<VisualizerType>('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.

// 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

API

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

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