Este plugin permite capturar as mutações e o estado do Pinia 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. Chame o plugin para definir o nome do store; isso retornará uma instância de tracker nomeada para o store, que você pode chamar passando o seu store como argumento para habilitar o rastreamento desse store.

import OpenReplay from '@openreplay/tracker';
import trackerVuex from '@openreplay/tracker-vuex';

import OpenReplay from '@openreplay/tracker/cjs';
import trackerVuex from '@openreplay/tracker-vuex/cjs';

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

// ...

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

const piniaStorePlugin = vuexPlugin('STORE NAME') // add a name to your store, 
                                                  // optional (will be randomly generated otherwise)
piniaStorePlugin(examplePiniaStore) // start tracking state updates

// now you can use examplePiniaStore as usual pinia store (destructure values or return it as a whole etc)

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.