Intégration PostHog pour React Router v6

Cette skill vous aide à ajouter PostHog analytics à vos applications React Router v6.

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

Reference files

• references/EXAMPLE.md - React Router v6 example project code
• references/react-router-v6.md - React router v6 - 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 modèle d'implémentation cible. Consultez la documentation pour les détails de l'API.

Principes clés

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

Directives du framework

• Pour les feature flags, utilisez les hooks useFeatureFlagEnabled() ou useFeatureFlagPayload() - ils gèrent automatiquement les états de chargement et la synchronisation externe
• Ajoutez la capture d'événements dans les gestionnaires d'événements où les actions utilisateur se produisent, PAS dans useEffect réagissant aux changements d'état
• N'utilisez PAS useEffect pour la transformation de données - calculez les valeurs dérivées pendant le rendu à la place
• N'utilisez PAS useEffect pour répondre aux événements utilisateur - mettez cette logique dans le gestionnaire d'événement lui-même
• N'utilisez PAS useEffect pour chaîner les mises à jour d'état - calculez toutes les mises à jour associées ensemble dans le gestionnaire d'événement
• N'utilisez PAS useEffect pour notifier les composants parents - appelez le callback parent aux côtés de setState dans le gestionnaire d'événement
• 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 la synchronisation avec les systèmes externes (widgets non-React, APIs du navigateur, souscriptions réseau)

Identifier les utilisateurs

Identifiez les utilisateurs lors des événements de connexion et d'inscription. Consultez le code exemple et la documentation pour le modèle identify correct pour ce framework. Si du code frontend et backend existe, transmettez la session côté client et le distinct ID en utilisant les en-têtes 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.