Fazer o tracker funcionar em um aplicativo React é bem simples.

Supondo que você esteja criando uma SPA (Single Page Application), tudo o que você precisa fazer é adicionar o seguinte código ao seu ponto de entrada:

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 //....
}

Como alternativa, você também pode usar a classe Tracker diretamente para gerenciar a instância manualmente:

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 //....
}

Em outras palavras, você pode instanciar o tracker no início do script e, quando a página carregar, iniciá-lo usando um hook useEffect.

Por motivos de segurança, evite deixar a sua projectKey fixa (hardcoded) diretamente no código do seu aplicativo. Em vez disso, armazene-a em um arquivo de configuração ou em um sistema de ambiente.

Há várias abordagens disponíveis, dependendo da configuração do seu projeto:

• Variáveis de ambiente: se você usa o Create React App, aproveite o suporte nativo a variáveis de ambiente
• Arquivos de configuração: use arquivos de configuração dedicados que sejam excluídos do controle de versão
• Gerenciamento de ambiente: ferramentas como dotenv podem ajudar a gerenciar chaves diferentes entre ambientes

Veja um exemplo abaixo:

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

Se você está construindo um aplicativo complexo com React, é provável que use o Next, o Remix ou um framework semelhante. Confira a nossa seção Configuração do Tracker para encontrar o framework que você está usando.

Se você tiver algum problema ao configurar o tracker no seu projeto React, entre em contato conosco na nossa comunidade no Slack e fale diretamente com os nossos devs!