Este plugin permite capturar as mutações e o estado do VueX e inspecioná-los depois ao reproduzir as gravações de sessões. Isso é muito útil para entender e corrigir problemas.

npm i @openreplay/tracker-vuex

Inicialize o pacote @openreplay/tracker normalmente e carregue o plugin nele. Em seguida, coloque o plugin gerado no campo plugins do seu store.

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
});

Siga o exemplo abaixo se o seu app usa SSR. Garanta que o tracker seja executado no ambiente do navegador. Consulte a seção Solução de problemas se você tiver erros com 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],
});

Você pode personalizar o comportamento do plugin com opções para sanitizar seus dados. Elas são semelhantes às do plugin padrão 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;
  },
})

Se você procura um exemplo prático de como usar este plugin para capturar mudanças de estado nos seus session replays, confira nosso tutorial detalhado aqui.

Está com dificuldade para configurar este plugin? Conecte-se ao nosso Slack e receba ajuda da nossa comunidade.