Intégration PostHog pour React Router v7 - Mode déclaratif

Cette skill vous aide à ajouter l'analytics PostHog aux applications React Router v7 - Mode déclaratif.

Workflow

Suivez ces étapes dans l'ordre pour compléter l'intégration :

1. basic-integration-1.0-begin.md - Configuration PostHog - Début ← Commencez ici
2. basic-integration-1.1-edit.md - Configuration PostHog - Édition
3. basic-integration-1.2-revise.md - Configuration PostHog - Révision
4. basic-integration-1.3-conclude.md - Configuration PostHog - Conclusion

Fichiers de référence

• references/EXAMPLE.md - Code du projet exemple React Router v7 - Mode déclaratif
• references/react-router-v7-declarative-mode.md - React router v7 mode déclaratif - docs
• references/identify-users.md - Identifier les utilisateurs - docs
• references/basic-integration-1.0-begin.md - Configuration PostHog - début
• references/basic-integration-1.1-edit.md - Configuration PostHog - édition
• references/basic-integration-1.2-revise.md - Configuration PostHog - révision
• references/basic-integration-1.3-conclude.md - Configuration PostHog - conclusion

Le projet exemple montre le pattern d'implémentation cible. Consultez la documentation pour les détails des API.

Principes clés

• Variables d'environnement : Utilisez toujours les variables d'environnement pour les clés PostHog. Ne les codez jamais en dur.
• Changements minimaux : Ajoutez le code PostHog aux côtés des intégrations existantes. Ne remplacez ni ne restructurez le code existant.
• Respectez l'exemple : Votre implémentation doit suivre les patterns du projet exemple d'aussi près que possible.

Directives framework

• Pour les feature flags, utilisez les hooks useFeatureFlagEnabled() ou useFeatureFlagPayload() - ils gèrent les états de chargement et la synchronisation externe automatiquement
• Ajoutez la capture analytics dans les event handlers où les actions utilisateur se produisent, PAS dans useEffect en réaction aux changements d'état
• N'utilisez PAS useEffect pour la transformation de données - calculez les valeurs dérivées au rendu plutôt que
• N'utilisez PAS useEffect pour répondre à des événements utilisateur - mettez cette logique directement dans l'event handler
• N'utilisez PAS useEffect pour chaîner les mises à jour d'état - calculez toutes les mises à jour connexes ensemble dans l'event handler
• N'utilisez PAS useEffect pour notifier les composants parents - appelez le callback parent en même temps que setState dans l'event handler
• Pour réinitialiser l'état du composant quand une prop change, passez la prop comme clé du composant plutôt que d'utiliser useEffect
• useEffect est UNIQUEMENT pour la synchronisation avec des systèmes externes (widgets non-React, APIs navigateur, souscriptions réseau)

Identification des utilisateurs

Identifiez les utilisateurs pendant les événements de login et signup. Consultez le code exemple et la documentation pour le pattern d'identification correct pour ce framework. Si du code frontend et backend existent, passez la session côté client et l'ID distinct en utilisant les headers X-POSTHOG-DISTINCT-ID et X-POSTHOG-SESSION-ID pour maintenir la corrélation.

Suivi des erreurs

Ajoutez le suivi des erreurs PostHog aux fichiers pertinents, particulièrement autour des flux utilisateur critiques et des limites d'API.