Utilisation d'OpenReplay avec React
Faire fonctionner le tracker sur une application React est assez simple.
Ajout du code de suivi
Section titled Ajout du code de suiviBien que vous puissiez obtenir une version copier-coller du code directement depuis la plateforme lorsque vous créez un nouveau projet, ce code est trop basique et rendra beaucoup plus difficile la personnalisation et l’ajout de plugins supplémentaires.
En supposant que vous construisez une SPA (Single Page Application), tout ce que vous avez à faire est d’ajouter le code suivant à votre point d’entrée :
import Tracker from '@openreplay/tracker';
const tracker = new Tracker({
projectKey: "<votre clé de projet>",
});
function YourMainComponent({props}) {
//quelque code ici...
useEffect(() => {
tracker.start();
}, [])
return //....
}En d’autres termes, vous pouvez instancier le tracker au début du script, et une fois la page chargée, vous pouvez le démarrer en utilisant un hook useEffect.
Gestion de la “projectKey” dans votre code
Section titled Gestion de la “projectKey” dans votre codeComme note, la projectKey que vous configurez est celle fournie par la plateforme OpenReplay. Cette valeur ne doit pas être stockée en dur dans votre code pour des raisons de sécurité, mais plutôt dans un fichier/système de configuration.
Il existe différentes options pour résoudre ce problème, en fonction de votre configuration, vous pourriez utiliser quelque chose comme le support des variables ENV par create-react-app.
Vous construisez quelque chose de plus complexe ?
Section titled Vous construisez quelque chose de plus complexe ?Si vous construisez une application complexe avec React, il y a de fortes chances que vous utilisiez Next, Remix ou quelque chose de similaire. Assurez-vous de consulter notre section de configuration pour trouver le framework avec lequel vous travaillez.
Des questions ?
Section titled Des questions ?Si vous rencontrez des problèmes lors de la configuration du tracker sur votre projet React, n’hésitez pas à nous contacter sur notre communauté Slack et posez vos questions directement à nos développeurs !
