Vue 기반 앱의 상태를 VueX로 관리하고 있다면, OpenReplay 플러그인을 연동하여 상태 업데이트를 추적하는 일은 매우 간단합니다.

따라 해 보고 싶다면 여기에 공개된 코드를 사용하세요.

가장 먼저 프로젝트에 OpenReplay 트래커를 연동해야 합니다. Vue 기반 프로젝트이므로 진입점은 main.js 파일입니다. 먼저 다음 명령어로 트래커를 설치합니다.

yarn add @openreplay/tracker

또는 npm을 선호한다면 다음과 같이 설치할 수도 있습니다.

npm install @openreplay/tracker

이제 플랫폼에서 프로젝트를 설정했다면 프로젝트 KEY를 가져와 프로젝트 루트에 있는 .env 파일에 저장합니다.

VUE_APP_OPENREPLAY_PROJECT_KEY=<your project key here>

환경 변수의 이름을 살펴보세요. VUE_APP_으로 시작하는데, 이렇게 하면 WebPack이 process.env.VUE_APP_OPENREPLAY_PROJECT_KEY 코드를 사용하는 모든 곳에서 값을 대체해 주기 때문에 실제 설정 파일을 클라이언트에 배포하지 않아도 됩니다.

이제 src 폴더 안에 tracker 폴더를 만들고, 그 안에 index.js 파일을 만듭니다. 이 파일은 모든 설정을 처리하고 트래커를 시작하는 startTracker 함수 하나를 내보냅니다.

import Tracker from '@openreplay/tracker';

import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
   return uuidV4() 
}

export function startTracker(config) {

    console.log("Starting tracker...")

    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
    let userId = null;

    const trackerConfig = {
        projectKey: config.projectKey
    }

    const tracker = new Tracker(trackerConfig);

    const pluginReturns = {}
    Object.keys(config?.plugins).forEach( pk => {
        pluginReturns[pk] = tracker.use(config?.plugins[pk]())
    })
 
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
    console.log("tracker: user id: ", userId)

    tracker.start();
    return {
        tracker,
        userId,
        ...pluginReturns
    }
}

이제 이 함수가 필요한 모든 일을 처리합니다. 호출할 때 프로젝트 키만 전달하면 됩니다. 다음과 같이 호출합니다(main.js 파일).

import {startTracker} from './tracker/index'

let {vuexTracker} = startTracker({
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
})

앞에서 살펴본 것처럼 process.env.VUE_APP_OPENREPLAY_PROJECT_KEY 줄은 페이지를 렌더링할 때 실제 프로젝트 키로 대체됩니다.

이제 상태 변경도 추적할 수 있도록 VueX 플러그인을 추가해 보겠습니다.

플러그인은 한 줄로 간단히 설치할 수 있습니다.

yarn add @openreplay/tracker-vuex

그다음 코드에서 플러그인을 import하고, 설정 객체의 일부로 startTracker 함수에 전달합니다.

해당 함수의 정의로 돌아가면 이미 플러그인을 처리하는 코드가 있다는 것을 알 수 있습니다. 실제로 설정의 plugins 요소는 (원하는 키와 함께) 플러그인을 받는 맵이며, 플러그인에 사용한 것과 같은 키로 use 메서드를 호출한 결과를 반환합니다.

다시 main.js 파일에서 예제로 보여 드리겠습니다.

//your other imports go here...
import trackerVuex from '@openreplay/tracker-vuex';
import store from './store'

let {vuexTracker} = startTracker({
    userIdEnabled: true,
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
    plugins:{
      'vuexTracker': trackerVuex
    } 
})

new Vue({
  router,
  store: store([vuexTracker]),
  render: h => h(App)
}).$mount('#app')

다음 내용에 주목하세요.

1. plugins 맵과 함께 startTracker 함수를 호출합니다. 문자열 “vuexTracker”는 작성 당시 임의로 정한 이름이며, 여기에는 어떤 문자열을 사용해도 됩니다.
2. 응답을 구조 분해 할당하여 “vuexTracker” 키(맵에 사용한 것과 같은 키)로 값을 가져옵니다. 이 두 키만 일치한다면 어떤 문자열을 사용해도 됩니다.
3. vuexTracker 함수를 store 함수의 매개변수로 전달합니다.

vuexTracker 변수에는 사실상 VueX 플러그인이 담겨 있으며, 이 플러그인은 VueX 스토어에 연결됩니다. 이를 위해 다음 코드를 사용합니다.

import Vue from 'vue'
import Vuex from 'vuex'

import account from './account'
import product from './product'

Vue.use(Vuex)

export default function (plugins = []) {
  return function() {
    const Store = new Vuex.Store({
      modules: {
        account,
        product
      },

      strict: process.env.DEV,
      plugins
    })

    return Store
  }
}

위 스니펫은 스토어를 설정하는 표준 코드이며, 애플리케이션의 상태에서 일어나는 일을 추적할 수 있도록 플러그인을 설정하는 기능만 추가했습니다.

이 설정이 끝나면 세션 리플레이에 다음과 같이 새로운 VueX 옵션이 표시됩니다.

트래커와 함께 VueX를 사용하는 애플리케이션의 전체 소스 코드는 이 저장소에서 확인할 수 있습니다.

프로젝트에 트래커나 VueX 플러그인을 설정하는 중 문제가 생기면 Slack 커뮤니티로 문의해 주세요. 개발자에게 직접 질문할 수 있습니다!