Intégration PostHog pour React (Vite)

Cette skill vous aide à ajouter PostHog analytics à vos applications React (Vite).

Workflow

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

1. basic-integration-1.0-begin.md - PostHog Setup - Begin ← Commencez ici
2. basic-integration-1.1-edit.md - PostHog Setup - Edit
3. basic-integration-1.2-revise.md - PostHog Setup - Revise
4. basic-integration-1.3-conclude.md - PostHog Setup - Conclusion

Fichiers de référence

• references/react.md - React - docs
• references/identify-users.md - Identify users - docs
• references/basic-integration-1.0-begin.md - PostHog setup - begin
• references/basic-integration-1.1-edit.md - PostHog setup - edit
• references/basic-integration-1.2-revise.md - PostHog setup - revise
• references/basic-integration-1.3-conclude.md - PostHog setup - conclusion

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

Principes clés

• Variables d'environnement : Toujours utiliser des variables d'environnement pour les clés PostHog. Ne jamais les hardcoder.
• Modifications minimales : Ajouter le code PostHog aux côtés des intégrations existantes. Ne pas remplacer ou restructurer le code existant.
• Suivre l'exemple : Votre implémentation doit suivre les patterns du projet exemple aussi fidèlement que possible.

Directives du 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 d'analytics dans les event handlers où les actions utilisateur se produisent, PAS dans useEffect réagissant aux changements d'état
• NE PAS utiliser useEffect pour la transformation de données - calculez les valeurs dérivées lors du rendu à la place
• NE PAS utiliser useEffect pour réagir aux événements utilisateur - mettez cette logique dans le event handler lui-même
• NE PAS utiliser useEffect pour chaîner les mises à jour d'état - calculez toutes les mises à jour liées ensemble dans le event handler
• NE PAS utiliser useEffect pour notifier les composants parents - appelez le callback parent aux côtés de setState dans le event handler
• Pour réinitialiser l'état du composant quand une prop change, passez la prop comme clé du composant au lieu d'utiliser useEffect
• useEffect est UNIQUEMENT pour synchroniser avec les systèmes externes (widgets non-React, APIs du navigateur, souscriptions réseau)

Identifier les utilisateurs

Identifiez les utilisateurs pendant les événements de connexion et d'inscription. Consultez le code exemple et la documentation pour le pattern d'identification correct pour ce framework. Si du code frontend et backend existent tous les deux, passez la session côté client et le distinct ID 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.