Faire fonctionner le tracker sur une application React est assez simple.

En supposant que vous créez une SPA (Single Page Application), il vous suffit d’ajouter le code suivant à votre point d’entrée :

import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: "<your project key>", 
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

Vous pouvez également utiliser directement la classe Tracker pour gérer son instance manuellement :

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

function YourMainComponent({props}) {
    //some code here...

    useEffect(() => {
        tracker.start();
    }, [])

    return //....
}

Autrement dit, vous pouvez instancier le tracker au début du script et, une fois la page chargée, le démarrer à l’aide d’un hook useEffect.

Pour des raisons de sécurité, évitez d’écrire en dur votre projectKey directement dans le code de votre application. Stockez-la plutôt dans un fichier de configuration ou un système d’environnement.

Plusieurs approches sont possibles selon la configuration de votre projet :

• Variables d’environnement : Si vous utilisez Create React App, profitez de sa prise en charge intégrée des variables d’environnement
• Fichiers de configuration : Utilisez des fichiers de configuration dédiés qui sont exclus du contrôle de version
• Gestion des environnements : Des outils comme dotenv peuvent vous aider à gérer différentes clés selon les environnements

Voici un exemple :

// Access the key from environment variables
const openReplayKey = process.env.REACT_APP_OPENREPLAY_KEY;

Si vous créez une application complexe avec React, il y a de fortes chances que vous utilisiez Next, Remix ou un framework similaire. N’oubliez pas de consulter notre section Configuration du Tracker pour trouver le framework avec lequel vous travaillez.

Si vous rencontrez des problèmes lors de la configuration du tracker sur votre projet React, contactez-nous sur notre communauté Slack et posez directement vos questions à nos développeurs !