Het implementeren van een aangepast loggingsysteem in je Capacitor-app voor gebruikersinteracties en gebeurtenissen vereist een gestructureerde aanpak. Hier volgt een stapsgewijze gids met codevoorbeelden en best practices: 1. Structuur van de logs Gebruik een gestandaardiseerd formaat, zoals JSON, voor consistente en gemakkelijk te analyseren logs. Een voorbeeld van een logentry: ```json { "timestamp": "2024-04-27T14:32:00Z", "event": "profiel_bewerkt", "userId": "abc123", "details": { "veld": "naam", "oudeWaarde": "Jan", "nieuweWaarde": "Janine" } } ``` 2. Logfunctie implementeren Maak een centrale loggingfunctie die logs verzamelt en opslaat: ```typescript interface LogEntry { timestamp: string; event: string; userId: string; details?: any; } function logEvent(event: string, userId: string, details?: any) { const log: LogEntry = { timestamp: new Date().toISOString(), event, userId, details, }; // Opslag van logs (bijvoorbeeld in localStorage, IndexedDB, of via API) saveLog(log); } ``` 3. Logopslag beheren Voor tijdelijke opslag kunnen lokale opslagmethoden gebruikt worden, zoals IndexedDB of localStorage. Voor persistente en veilige opslag gebruik je een externe server of cloudoplossing. Voorbeeld met localStorage (niet ideaal voor grote hoeveelheden): ```typescript function saveLog(log: LogEntry) { const logs = JSON.parse(localStorage.getItem('app_logs') || '[]'); logs.push(log); localStorage.setItem('app_logs', JSON.stringify(logs)); } ``` Voor betere schaalbaarheid en privacy, overweeg het versturen van logs naar een backend API: ```typescript function saveLog(log: LogEntry) { fetch('https://je-api.com/logs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(log) }); } ``` 4. Data privacy waarborgen - Anonimiseer indien mogelijk gebruikersgegevens. - Vraag expliciet toestemming voor het verzamelen van logs. - Versleutel gevoelige data vóór verzending. - Beperk de opgeslagen gegevens tot het minimum. - Implementeer beveiligingsmaatregelen op je API en opslag. Voorbeeld van anonimiseren: ```typescript function anonymizeUserId(userId: string): string { // Bijvoorbeeld hashfunctie of pseudoniem return 'user_' + userId.slice(0, 4); } ``` Gebruik deze in je logfunctie: ```typescript const anonymizedUserId = anonymizeUserId(userId); logEvent('profiel_bewerkt', anonymizedUserId, details); ``` 5. Best practices - Log alleen noodzakelijke gegevens. - Voeg context toe (bijvoorbeeld locatie, apparaat). - Maak gebruik van verschillende logniveaus (info, warning, error). - Periodiek uploaden en opschonen van logs. - Documenteer je loggingbeleid en zorg dat het transparant is voor gebruikers. 6. Voorbeeld volledige implementatie ```typescript interface LogEntry { timestamp: string; event: string; userId: string; details?: any; } function logEvent(event: string, userId: string, details?: any) { const anonymizedUserId = anonymizeUserId(userId); const log: LogEntry = { timestamp: new Date().toISOString(), event, userId: anonymizedUserId, details, }; saveLog(log); } function saveLog(log: LogEntry) { // Verstuur naar backend fetch('https://je-api.com/logs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(log), }).catch((err) => { // Alternatief: lokale opslag bij netwerkproblemen const logs = JSON.parse(localStorage.getItem('app_logs') || '[]'); logs.push(log); localStorage.setItem('app_logs', JSON.stringify(logs)); }); } function anonymizeUserId(userId: string): string { return 'user_' + userId.slice(0, 4); } ``` Door deze aanpak te volgen, creëer je een effectief en privacybewust logsysteem dat inzicht geeft in gebruikersinteracties rond profielbeheer, en dat schaalbaar en veilig is.

Hier is een gedetailleerde handleiding voor het implementeren van een aangepast loggingsysteem in je Capacitor-app voor gebruikersprofielbeheer: ## 1. Logging Service Structuur ### Basis Logging Service (TypeScript) ```typescript // logging.service.ts export interface LogEntry { timestamp: string; level: 'INFO' | 'WARN' | 'ERROR' | 'DEBUG'; category: string; event: string; userId?: string; userAction: string; component: string; details: any; sessionId: string; appVersion: string; } export class LoggingService { private sessionId: string; private currentUserId?: string; private readonly MAX_LOG_SIZE = 1000; // Maximum aantal logs in geheugen private logs: LogEntry[] = []; constructor() { this.sessionId = this.generateSessionId(); this.initializeLogging(); } private generateSessionId(): string { return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9); } private initializeLogging() { // Basis app-gebeurtenis vastleggen this.info('APP_START', 'Applicatie gestart', { platform: this.getPlatform(), timestamp: new Date().toISOString() }); } public setUserId(userId: string) { this.currentUserId = userId; this.info('USER_IDENTIFIED', 'Gebruiker geïdentificeerd', { userId }); } public clearUserId() { this.info('USER_LOGOUT', 'Gebruiker uitgelogd', { previousUserId: this.currentUserId }); this.currentUserId = undefined; } public info(event: string, action: string, details?: any) { this.addLog('INFO', event, action, details); } public warn(event: string, action: string, details?: any) { this.addLog('WARN', event, action, details); } public error(event: string, action: string, details?: any) { this.addLog('ERROR', event, action, details); } private addLog(level: LogEntry['level'], event: string, action: string, details?: any) { const logEntry: LogEntry = { timestamp: new Date().toISOString(), level, category: 'USER_PROFILE', event, userId: this.currentUserId, userAction: action, component: this.getCallingComponent(), details: this.sanitizeData(details), sessionId: this.sessionId, appVersion: '1.0.0' // Dynamisch maken in productie }; this.logs.push(logEntry); // Automatisch opschonen bij te veel logs if (this.logs.length > this.MAX_LOG_SIZE) { this.logs = this.logs.slice(-this.MAX_LOG_SIZE); } // Console logging voor development if (level === 'ERROR') { console.error('🔴 [LOG]', logEntry); } } private sanitizeData(data: any): any { if (!data) return data; const sanitized = { ...data }; // Verwijder gevoelige informatie const sensitiveFields = ['password', 'wachtwoord', 'token', 'auth', 'email']; sensitiveFields.forEach(field => { if (sanitized[field]) { sanitized[field] = '***REDACTED***'; } }); return sanitized; } private getCallingComponent(): string { // Vereenvoudigde implementatie - in productie gebruik je source maps try { throw new Error(); } catch (e) { const stack = e.stack.split('\n'); return stack[3]?.trim() || 'unknown'; } } private getPlatform(): string { return 'web'; // Capacitor detectie toevoegen } public getLogs(): LogEntry[] { return [...this.logs]; } public clearLogs() { this.logs = []; } } ``` ## 2. Gebruikersprofiel-specifieke Logging ```typescript // profile-logging.service.ts export class ProfileLoggingService { constructor(private loggingService: LoggingService) {} public logProfileView() { this.loggingService.info('PROFILE_VIEW', 'Profielpagina bekeken'); } public logProfileUpdate(field: string, oldValue: any, newValue: any) { this.loggingService.info('PROFILE_UPDATE', 'Profiel bijgewerkt', { field, oldValue: this.sanitizeField(field, oldValue), newValue: this.sanitizeField(field, newValue) }); } public logProfilePhotoChange(action: string) { this.loggingService.info('PROFILE_PHOTO_CHANGE', 'Profielfoto gewijzigd', { action // 'upload', 'remove', 'crop' }); } public logPrivacySettingChange(setting: string, enabled: boolean) { this.loggingService.info('PRIVACY_SETTING_CHANGE', 'Privacy-instelling gewijzigd', { setting, enabled }); } private sanitizeField(field: string, value: any): any { const sensitiveFields = ['email', 'phone', 'birthDate']; if (sensitiveFields.includes(field)) { return '***REDACTED***'; } return value; } } ``` ## 3. Log Opslag Management ```typescript // storage.service.ts import { Preferences } from '@capacitor/preferences'; export class LogStorageService { private readonly LOGS_KEY = 'user_analytics_logs'; private readonly MAX_STORED_LOGS = 500; async saveLogs(logs: LogEntry[]): Promise<void> { try { // Beperk het aantal opgeslagen logs const logsToSave = logs.slice(-this.MAX_STORED_LOGS); await Preferences.set({ key: this.LOGS_KEY, value: JSON.stringify(logsToSave) }); } catch (error) { console.error('Fout bij opslaan logs:', error); } } async loadLogs(): Promise<LogEntry[]> { try { const { value } = await Preferences.get({ key: this.LOGS_KEY }); return value ? JSON.parse(value) : []; } catch (error) { console.error('Fout bij laden logs:', error); return []; } } async clearLogs(): Promise<void> { await Preferences.remove({ key: this.LOGS_KEY }); } async exportLogs(): Promise<string> { const logs = await this.loadLogs(); return JSON.stringify(logs, null, 2); } } ``` ## 4. Privacy en Data Bescherming ```typescript // privacy.service.ts export class PrivacyService { private readonly CONSENT_KEY = 'analytics_consent'; async getUserConsent(): Promise<boolean> { const { value } = await Preferences.get({ key: this.CONSENT_KEY }); return value === 'true'; } async setUserConsent(consent: boolean): Promise<void> { await Preferences.set({ key: this.CONSENT_KEY, value: consent.toString() }); } async anonymizeLogs(logs: LogEntry[]): Promise<LogEntry[]> { return logs.map(log => ({ ...log, userId: log.userId ? this.hashUserId(log.userId) : undefined, sessionId: this.hashSessionId(log.sessionId) })); } private hashUserId(userId: string): string { // Eenvoudige hash - gebruik crypto in productie return 'user_' + this.simpleHash(userId); } private hashSessionId(sessionId: string): string { return 'session_' + this.simpleHash(sessionId); } private simpleHash(str: string): string { let hash = 0; for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return Math.abs(hash).toString(36); } } ``` ## 5. Implementatie in Componenten ```typescript // profile.component.ts @Component({ selector: 'app-profile', template: ` <div (click)="logProfileView()"> <!-- Profiel content --> </div> ` }) export class ProfileComponent { constructor( private profileLogging: ProfileLoggingService, private loggingService: LoggingService ) {} ngOnInit() { this.profileLogging.logProfileView(); } onProfileUpdate(field: string, newValue: any) { this.profileLogging.logProfileUpdate(field, this.currentProfile[field], newValue); } onPrivacySettingChange(setting: string, enabled: boolean) { this.profileLogging.logPrivacySettingChange(setting, enabled); } private logProfileView() { this.loggingService.info('PROFILE_INTERACTION', 'Profiel interactie', { element: 'profile_container', action: 'view' }); } } ``` ## 6. Best Practices en Configuratie ```typescript // app.module.ts @NgModule({ providers: [ LoggingService, ProfileLoggingService, LogStorageService, PrivacyService ] }) export class AppModule {} // main.ts // Privacy-first initialisatie async function initializeApp() { const privacyService = new PrivacyService(); const hasConsent = await privacyService.getUserConsent(); if (!hasConsent) { // Toon consent dialoog await showConsentDialog(); } } ``` ## 7. Log Structuur Best Practices - **Categorieën**: Gebruik consistente categorieën (`USER_PROFILE`, `AUTH`, `SETTINGS`) - **Event naming**: Gebruik beschrijvende namen (`PROFILE_UPDATE_SUCCESS`, `PHOTO_UPLOAD_FAILED`) - **Details**: Log alleen noodzakelijke data, geen gevoelige informatie - **Timestamps**: Gebruik ISO 8601 format voor consistentie ## 8. Privacy Garanties - **Data minimalisatie**: Log alleen wat essentieel is voor analytics - **Anonimisering**: Hash gebruikers- en sessie-ID's - **Consent management**: Vraag expliciete toestemming - **Data retentie**: Implementeer automatische log-verwijdering - **Lokale opslag**: Bewaar logs lokaal tot export Deze implementatie biedt een robuust, privacy-vriendelijk loggingsysteem dat perfect past bij gebruikersprofielbeheer functionaliteit. Pas de log-niveaus en gebeurtenissen aan op basis van je specifieke analytische behoeften.