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

핵심은 컨텍스트를 활용하는 것입니다. Next.js에서 하는 방식과 비슷하게 들리지만 구현은 다릅니다.

트래커는 실행에 브라우저 컨텍스트가 필요하므로, 클라이언트 측에서 가져오고 생성되도록 아래와 같이 “트래커 컨텍스트 만들기” 예시를 조정해야 할 수 있습니다.

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    if (process.browser) {
			// singleton approach
			const { tracker } = await import('@openreplay/tracker');
			tracker.configure({
				projectKey: "<your project key>", 
        ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
			});
			tracker.start();
			
			// or you can use a class based approach
      const Tracker = await import('@openreplay/tracker');
      const tracker = new Tracker({
	      projectKey: "", // pKey
	      ingestPoint: "ingestPoint",
      })
      
      tracker.start()
    }
  })
</script>

이 프로젝트의 전체 코드를 확인하고 싶다면 이 튜토리얼 전반에서 사용하는 저장소를 확인해 보세요.

Readme 파일의 안내에 따라 직접 복제해서 테스트해 볼 수 있는 SvelteKit 샘플 애플리케이션입니다. 배포하고 설정을 마치면 세션 리플레이를 캡처할 수 있습니다.

이 방식은 Svelte의 Context를 사용합니다. Context를 사용하면 부모 컴포넌트와 그 모든 자식 컴포넌트 간에 데이터를 공유할 수 있으며, React의 Context 프로바이더와 매우 비슷합니다.

이 예시에서는 애플리케이션의 Admin 섹션에 트래커를 추가하므로, Admin 레이아웃 파일(src/layout/Admin.svelte)에서 컨텍스트를 설정합니다. 그런 다음 이 섹션 안에서 처음 렌더링되는 페이지에서 트래커를 시작합니다.

src/layout/Admin.svelte 파일의 script 태그 안에 다음 코드를 추가해 보겠습니다.

import {Tracker, key} from "../context/tracker"

let tracker = new Tracker({
    projectKey: __myapp.env.OPENREPLAY_PROJECT_KEY
});
  
setContext(key, {
 getTracker: () => tracker
} )

물론 이 파일에는 더 많은 코드가 있겠지만, 위에 보이는 부분이 지금 우리에게 중요한 부분입니다.

1. 먼저 OpenReplay에서 Tracker와 key 변수를 가져옵니다(이에 대해서는 곧 설명하겠습니다).
2. 그런 다음 Tracker를 인스턴스화합니다. 보시다시피 사용하는 설정 옵션은 프로젝트 키뿐이며, 이 키는 OpenReplay에서 프로젝트를 설정한 후 UI에서 얻을 수 있습니다.
3. setContext를 호출해 만든 컨텍스트에 트래커 인스턴스를 저장합니다. 나중에 key 변수를 사용해 컨텍스트에서 이 값을 가져옵니다.

컨텍스트를 사용하는 일(그리고 start 메서드를 호출하는 일)은 Svelte의 getContext 함수로 컨텍스트를 가져오는 것만큼 간단합니다.

컨텍스트에는 getTracker라는 함수를 가진 객체가 있으므로, 이를 구조 분해하여 해당 함수를 호출합니다.

import {key} from "../../context/tracker"
  
let {getTracker} = getContext(key)
onMount( () => {
	let tracker = getTracker()
	tracker.start()
})

그다음에는 start 메서드를 onMount 콜백 안에서 호출하기만 하면 됩니다. 브라우저에서 이 메서드를 호출하도록 하기 위한 것이며, 그렇지 않으면 트래커가 동작하지 않습니다.

이 파일을 두 곳에서 모두 사용했으니, 이제 간단히 살펴볼 차례입니다.

이 파일은 두 가지 주요 요소를 내보냅니다.

1. 레이아웃 파일에서 인스턴스화한 Tracker 클래스.
2. 컨텍스트를 저장하고 가져오는 데 사용하는 key 변수.

파일의 내용은 다음과 같습니다.

import Tracker from '@openreplay/tracker'

const key = Symbol("openreplay tracker")

export {Tracker, key}

여기서 눈여겨볼 점은 key 변수가 단순한 문자열이 아니라 실제로는 Symbol이라는 것입니다. 컨텍스트를 사용하는 다른 서드파티 라이브러리와의 이름 충돌을 피하기 위해서입니다.

마지막으로 살펴볼 것은 프로젝트 키를 처리하는 방법입니다. 프로젝트 키는 코드에 하드코딩해서는 안 되기 때문입니다.

보통은 이를 위해 환경 변수를 사용하지만, 브라우저에서 해당 데이터가 필요하고 Svelte가 이를 쉽게 처리할 방법을 제공하지 않으므로 dotenv와 @rollup/plugin-replace 두 패키지로 이 문제를 해결합니다.

한편으로는 dotenv 패키지를 사용해 .env 파일 안에 환경 변수를 정의할 수 있게 합니다. 필요한 변수를 다음과 같이 정의합니다.

OPENREPLAY_PROJECT_KEY="<YOUR PROJECT KEY>"

다른 한편으로는 프런트엔드 코드에서 dotenv를 사용할 수 없으므로(브라우저에서 사용할 수 없는 fs 모듈에 의존하기 때문입니다) 롤업용 replace 플러그인을 사용합니다. 이 플러그인은 파일 안의 코드를 우리가 지정한 값으로 바꿔 줍니다. 그래서 문자열 “__myapp.env.OPENREPLAY_PROJECT_KEY”를 (dotenv 패키지 덕분에) .env 파일에서 로드한 실제 프로젝트 키로 바꾸도록 플러그인을 설정합니다.

이를 위해 프로젝트 루트의 rollup.config.js 파일을 열고 plugins 키에 다음 코드를 추가합니다.

replace({
  "__myapp.env.OPENREPLAY_PROJECT_KEY": `"${process.env.OPENREPLAY_PROJECT_KEY}"`
})

이 플러그인은 번들링 과정에서 백엔드에서 실행되므로 이 방식이 가능합니다. 이 설정 파일의 전체 내용을 확인하고 싶다면 여기에서 확인할 수 있습니다.

트래커가 적용된 Svelte 기반 애플리케이션의 전체 소스 코드는 이 저장소에서 확인할 수 있습니다.

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