React 애플리케이션에서 트래커를 동작시키는 일은 꽤 간단합니다.

SPA(Single Page Application)를 만든다고 가정하면, 진입점에 다음 코드를 추가하기만 하면 됩니다.

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

또는 Tracker 클래스를 직접 사용하여 인스턴스를 수동으로 관리할 수도 있습니다.

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

즉, 스크립트 시작 부분에서 트래커를 인스턴스화하고, 페이지가 로드되면 useEffect 훅으로 트래커를 시작할 수 있습니다.

보안을 위해 projectKey를 애플리케이션 코드에 직접 하드코딩하지 마세요. 대신 설정 파일이나 환경 시스템에 저장하세요.

프로젝트 구성에 따라 사용할 수 있는 방법이 여러 가지 있습니다.

• 환경 변수: Create React App을 사용한다면 환경 변수에 대한 기본 지원을 활용하세요
• 설정 파일: 버전 관리에서 제외한 전용 설정 파일을 사용하세요
• 환경 관리: dotenv 같은 도구를 사용하면 환경별로 서로 다른 키를 관리하는 데 도움이 됩니다

다음은 예시입니다.

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

React로 복잡한 애플리케이션을 만든다면 Next, Remix 또는 비슷한 프레임워크를 사용하고 있을 가능성이 높습니다. 트래커 설정 섹션에서 사용 중인 프레임워크를 찾아보세요.

React 프로젝트에 트래커를 설정하는 중 문제가 있다면 Slack 커뮤니티로 문의하여 개발자에게 직접 질문하세요!