Using OpenReplay with React

Getting the tracker to work on a React application is quite straightforward.

Adding the tracking code

While you can get a copy&paste version of the code directly from the platform when you create a new project, that code is too barebone and will make it a lot harder to customize and add extra plugins.

Assuming you’re building a SPA (Single Page Application), all you have to do, is to add the following code to your entry point:

import Tracker from '@openreplay/tracker';

const tracker = new Tracker({
  projectKey: "<your project key>",  
});

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

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

    return //....
}

In other words, you can instatiate the tracker at the start of the script, and once the page loads, you can start it using a useEffect hook.

Handling the “projectKey” in your code

As a note, the projectKey that you configure is the one provided by OpenReplay’s platform. This value should not be stored hardcoded in your code for security reasons, but rather on some kind of configuration file/sytem.

There are different options out there to solve this problem, depending on your setup, you could use something like create-react-app support for ENV variables.

Building something more complex?

If you’re building a complext applicaton with React, chances are you’re using Next, Remix or something like those. Make sure to check out our Setup section to find the framework you’re working with.

Have questions?

If you have any issues setting up the tracker on your React project, please reach out to us on our Slack community and ask our devs directly!