Observabilité côté Svelte

Concept

L'observabilité côté Svelte vise à fournir une télémétrie lisible et cohérente pour le diagnostic des applications. Le logger unifié $lib/logger (wrapper autour de consola/browser) harmonise les logs avec des couleurs, niveaux, et tags standardisés, facilitant le débogage et le support.

Initialiser le logger dans un composant

<script lang="ts">
	import logger from '$lib/logger';

	const log = logger.withTag('ComponentName');

	onMount(() => {
		log.info('Component ready');
	});

	function handleFailure(error: unknown) {
		log.error('Unable to fetch data', error);
	}
</script>

Bonnes pratiques

• Créer une instance par fichier : appelez logger.withTag(...) une seule fois en haut de chaque composant et réutilisez-la ensuite. Cela garantit une signature homogène des logs.
• Utiliser des niveaux adaptés :
  • log.debug() pour le bruit de diagnostic activable en local.
  • log.info() pour le suivi nominal (lifecycle, réactions d'orchestrateurs, etc.).
  • log.warn() pour les situations récupérables ou dégradées.
  • log.error() pour les erreurs bloquantes ou nécessitant une investigation.
• Préférer les objets aux chaînes concaténées afin de faciliter l'exploitation (ex. log.info('Install request', { packageId, attempt });).

Tags recommandés

Contexte	Tag suggéré	Exemple d'usage
Layout racine	routes/+layout	Initialisation globale, gestion des erreurs fenêtre.
Layout connectivité	(connectivity)/+layout	Orchestrateurs Android, SSE, état des thèmes.
Composants Navbars & dérivés	Navbars.svelte, NavbarFeatured	Navigation, focus et interactions utilisateurs.
Composants UI génériques (modals, OSD)	Modal.svelte, Osd	Ouvertures de modales, toggle debug, erreurs graphiques.
Orchestrateurs internes	Utiliser un sous-tag (log.withTag('…').info(...)) pour préciser l'action (ex. log.withTag('handleDisplayContent')).

Adaptez librement ces tags tant qu'ils reflètent le périmètre fonctionnel du composant. Le format [tag] message est automatiquement appliqué par le reporter navigateur fourni.

Interdictions ESLint

Les règles ESLint interdisent désormais console.* et l'import direct de consola dans les fichiers .svelte. Toute nouvelle instrumentation doit donc passer par $lib/logger. Cette règle est vérifiée par npm run lint.

Aller plus loin

• Utilisez logger.withTag('Parent').withTag('Action') pour factoriser des sous-contextes (ex. const settingsLog = log.withTag('Settings');).
• Centralisez les événements critiques dans les orchestrateurs pour qu'ils puissent être corrélés avec les logs natifs (Android, webOS, etc.).
• Combinez le logger avec les notifications (createErrorNotification) pour informer l'utilisateur tout en gardant une trace côté développeur.

En suivant ces conventions, les équipes QA et support peuvent diagnostiquer rapidement les situations anormales directement depuis la console du navigateur ou des outils de capture distants.

---

e-novatis
Date de dernière mise à jour : date inconnue