Usar OpenReplay con React

Hacer funcionar el rastreador en una aplicación React es bastante sencillo.

Aunque puedes obtener una versión de copiar y pegar del código directamente desde la plataforma cuando creas un nuevo proyecto, ese código es demasiado básico y hará que sea mucho más difícil personalizarlo y agregar plugins adicionales.

Suponiendo que estás construyendo una SPA (Single Page Application), todo lo que tienes que hacer es agregar el siguiente código a tu punto de entrada:

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
projectKey: "<tu clave de proyecto>",  
});

function YourMainComponent({props}) {
//algún código aquí...

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

    return //....
}

En otras palabras, puedes instanciar el rastreador al inicio del script, y una vez que la página se carga, puedes iniciarlo utilizando un hook useEffect.

Como nota, la projectKey que configuras es la proporcionada por la plataforma de OpenReplay. Este valor no debe almacenarse de forma codificada en tu código por razones de seguridad, sino en algún tipo de archivo/sistema de configuración.

Hay diferentes opciones para resolver este problema, dependiendo de tu configuración, podrías usar algo como el soporte de variables ENV de create-react-app.

Si estás construyendo una aplicación compleja con React, es probable que estés usando Next, Remix o algo similar. Asegúrate de consultar nuestra sección de configuración para encontrar el framework con el que estás trabajando.

Si tienes algún problema configurando el rastreador en tu proyecto React, por favor contáctanos en nuestra comunidad de Slack y pregunta directamente a nuestros desarrolladores.

JavaScript SDK

iOS SDK (Beta)

Android SDK (Beta)

React Native SDK (Beta)