Este plugin te permite capturar las mutaciones/estado de VueX e inspeccionarlas más tarde al reproducir las grabaciones de sesiones. Esto es muy útil para entender y solucionar problemas.

npm i @openreplay/tracker-vuex

Inicializa el paquete @openreplay/tracker como de costumbre y carga el plugin en él. Luego coloca el plugin generado en el campo plugins de tu store.

import Vuex from 'vuex'
import OpenReplay from '@openreplay/tracker';
import trackerVuex from '@openreplay/tracker-vuex';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  // ... options 
});

Sigue el ejemplo a continuación si tu aplicación es SSR. Asegúrate de que tracker.start() se llame una vez que la aplicación se haya iniciado (en useEffect o componentDidMount). Consulta la sección de Solución de problemas si obtienes errores con 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,
  // ... 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],
});

Puedes personalizar el comportamiento del plugin con opciones para sanear tus datos. Son similares a las del plugin estándar 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;
  },
})

Si buscas un ejemplo práctico de cómo usar este plugin para capturar los cambios de estado en tus repeticiones de sesiones, consulta nuestro tutorial detallado aquí.

¿Tienes problemas para configurar este plugin? Conéctate a nuestro Slack o visita nuestro Foro y obtén ayuda de nuestra comunidad.