Если вы используете VueX для управления состоянием своих приложений на основе Vue, то интеграция плагина 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

После этого мы можем импортировать его в наш код и передать в составе объекта конфигурации в функцию startTracker.

Вернитесь к определению этой функции и обратите внимание, что у нас уже есть код для обработки плагинов. На самом деле элемент plugins конфигурации — это карта (map), которая получает плагины (с ключом по нашему выбору) и возвращает то, что мы получаем при вызове метода 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. Вызываем функцию startTracker с картой plugins. Строка «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 и задайте вопросы напрямую нашим разработчикам!