이 플러그인을 사용하면 VueX 뮤테이션/상태를 캡처하여 세션 녹화를 재생하면서 나중에 확인할 수 있습니다. 문제를 파악하고 해결하는 데 매우 유용합니다.

npm i @openreplay/tracker-vuex

@openreplay/tracker 패키지를 평소처럼 초기화하고 플러그인을 로드합니다. 그런 다음 생성된 플러그인을 스토어의 plugins 필드에 넣습니다.

import Vuex from 'vuex'
import trackerVuex from '@openreplay/tracker-vuex';
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
});

앱이 SSR인 경우 아래 예시를 따르세요. 트래커가 브라우저 환경에서 실행되도록 하세요. SSR에서 오류가 발생하면 문제 해결 섹션을 참고하세요.

import Vuex from 'vuex'
import OpenReplay from '@openreplay/tracker/cjs';
import trackerVuex from '@openreplay/tracker-vuex/cjs';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
  // ... options
});

// check list of available options below
const vuexPlugin = tracker.use(trackerVuex(<options>)); 

// add a name to your store, optional (will be randomly generated otherwise)
const storeTracker = vuexPlugin('STORE NAME') 

const store = createStore({
  state,
  mutations,
  plugins: [storeTracker]
})

// check list of available options below
const vuexPlugin = tracker.use(trackerVuex(<options>));  

tracker.start();

const store = new Vuex.Store({
  //...
  plugins: [vuexPlugin],
});

옵션을 사용해 플러그인 동작을 커스터마이징하여 데이터를 정제할 수 있습니다. 이 옵션은 표준 createLogger 플러그인의 옵션과 비슷합니다.

trackerVuex({
  filter (mutation, state) {
    // returns `true` if a mutation should be logged
    // `mutation` is a `{ type, payload }`
    return mutation.type !== "aBlacklistedMutation";
  },
  transformer (state) {
    // transforms the state before logging it.
    // for example return only a specific sub-tree
    return state.subTree;
  },
  mutationTransformer (mutation) {
    // mutations are logged in the format of `{ type, payload }`
    // we can format it any way we want.
    return mutation.type;
  },
})

이 플러그인을 사용해 세션 리플레이에서 상태 변경을 캡처하는 실용적인 예제를 찾고 계신다면 자세한 튜토리얼을 확인해 보세요.

이 플러그인 설정에 문제가 있나요? Slack에 접속하여 커뮤니티의 도움을 받으세요.