OpenReplay 트래커를 Remix 기반 프로젝트에 설치하는 과정은 비교적 간단합니다.

Remix 프로젝트가 준비되었다면 app 폴더 안의 root.jsx 파일을 찾아, 플랫폼에서 프로젝트를 만들 때 OpenReplay가 제공한 SSR 코드를 포함합니다.

플랫폼에서 제공하는 코드를 그대로 사용해도 됩니다. 시작하는 데 필요한 최소한의 코드입니다. 그렇게 한다면 아래 그림과 같이 “Server-Side-Rendered (SSR)” 옵션을 선택해야 합니다.

트래커를 싱글톤 인스턴스로 사용할 수 있으며, 이 방식을 권장합니다. 이렇게 하면 앱 어디에서든 트래커에 접근할 수 있습니다.

import { tracker } from '@openreplay/tracker'

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

이 예시에서는 샘플 모듈을 만들어 tracker.ts로 app 폴더 안에 저장합니다. 이 모듈은 트래커를 인스턴스화하고 시작하는 startTracker라는 함수를 내보냅니다.

import {v4 as uuidV4} from 'uuid'
import Tracker from '@openreplay/tracker'

function defaultGetUserId() {
    return uuidV4() 
}

type TrackerConfig = {
    projectKey: string,
    userIdEnabled?: boolean,
    getUserId?: () => string
}

export function startTracker(config: TrackerConfig) {
    let tracker = null;
    let userId = "";
   
    console.log("Starting tracker...")
    console.log("Custom configuration received: ", config)
        
    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
        
    const trackerConfig: TrackerConfig = {
        projectKey: config?.projectKey
    }
        
    console.log("Tracker configuration")
    console.log(trackerConfig)
    tracker = new Tracker(trackerConfig);
        
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
     
    tracker.start();
      
    return {
        tracker,
        userId
    }
}

이 방식으로 OpenReplay의 Tracker 모듈을 가져오는 데 문제가 있다면 다음과 같이 동적 import를 사용해 보세요.

import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
    return uuidV4() 
}

type TrackerConfig = {
    projectKey: string,
    userIdEnabled?: boolean,
    getUserId?: () => string
}

export function startTracker(config: TrackerConfig) {
    let tracker = null;
    let Tracker = null
    let userId = "";
    
    (async () => {
				//dynamic import 
        Tracker  = (await import('@openreplay/tracker')).default 
        console.log("Starting tracker...")
        console.log("Custom configuration received: ", config)
        
        const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
        
        const trackerConfig: TrackerConfig = {
            projectKey: config?.projectKey
        }
        
        console.log("Tracker configuration")
        console.log(trackerConfig)
        tracker = new Tracker(trackerConfig);
        
        if(config?.userIdEnabled) {
            userId = getUserId()
            tracker.setUserID(userId)
        }
        
        
        tracker.start();
        
    })()
    
    return {
        tracker,
        userId
    }
}

이제 다음 명령으로 프로젝트에 트래커 패키지를 설치해야 합니다.

$ npm install @openreplay/tracker

위 코드가 그대로 동작하도록 uuid 패키지도 설치해야 합니다.

이 작업을 마치면 트래킹을 시작할 준비가 거의 끝났습니다. 다만 프로젝트 키를 ENV 변수로 설정한 뒤 이를 config 객체에 담아 트래커에 전달해야 합니다(이 객체는 startTracker 함수가 받습니다).

ENV 변수는 백엔드에서 접근할 수 있으므로, ENV 변수를 포함해 외부 데이터를 로드하는 데 사용할 수 있는 loader 함수를 활용합니다.

그런 다음 useLoaderData 훅을 사용해 하이드레이션 이후 컴포넌트에서 로드된 데이터에 접근할 수 있도록 합니다.

root.tsx 파일(TypeScript를 사용하지 않는다면 jsx 파일) 안에 다음 함수를 추가합니다.

type LoaderData = {
  ENV: {
    projectKey: string | undefined
  }
};

export const loader: LoaderFunction = async ({ }) => {
  return json<LoaderData>({
    ENV: {
      projectKey: process.env.OPENREPLAY_PROJECT_KEY
    }
  });
};

프로젝트 키를 OPENREPLAY_PROJECT_KEY ENV 변수에 설정하고 있다는 점에 주목하세요.

이 값을 loader 함수 실행 결과의 일부로 반환하면, 다음과 같이 메인 컴포넌트에서 useLoaderData 훅을 사용할 수 있습니다.

export default function App() {

  let loaderData = useLoaderData()

  useEffect(() => {
    startTracker({
      projectKey:  loaderData.ENV.projectKey
    })
  }, []) 

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

컴포넌트의 내용은 목적에 따라 달라질 수 있지만, 이 예시는 페이지가 하이드레이션된 후 올바른 프로젝트 키로 트래커를 시작하는 역할을 합니다.

이제 애플리케이션을 배포하면 됩니다.

테스트를 시작하면 탭을 닫은 지 몇 분 후에 리플레이가 목록에 표시됩니다(실수로 탭을 닫은 것이 아님을 확인하기 위한 것입니다).

Remix 기반 애플리케이션의 전체 코드는 이 저장소에서 확인할 수 있습니다.

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