Intégration PostHog pour React Router v7 - Framework mode

Cette skill vous aide à ajouter PostHog analytics à vos applications React Router v7 - Framework mode.

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 v7 - Framework mode example project code
• references/react-router-v7-framework-mode.md - React router v7 framework mode (remix v3) - 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 : Utilisez toujours des 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.
• Suivez l'exemple : Votre implémentation doit suivre les patterns du projet exemple aussi fidèlement que possible.

Guidelines 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 analytics dans les event handlers 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 directement dans l'event handler
• N'utilisez PAS useEffect pour chaîner les mises à jour d'état - calculez toutes les mises à jour liées ensemble dans l'event handler
• N'utilisez PAS useEffect pour notifier les composants parents - appelez le callback du parent aux côtés de 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 ne doit être utilisé QUE 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 pattern identify correct pour ce framework. Si du code frontend et backend existe, 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 API.