Mit diesem Plugin können Sie Redux-Aktionen und -Zustände erfassen und später beim Abspielen von Sitzungsaufzeichnungen untersuchen. Das ist sehr hilfreich, um Probleme zu verstehen und zu beheben.

npm i @openreplay/tracker-redux --save

Initialisieren Sie den Tracker und fügen Sie anschließend die generierte Middleware in Ihre Redux-Kette ein.

import { applyMiddleware, createStore } from 'redux';
import trackerRedux from '@openreplay/tracker-redux';
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
});
tracker.start();
const openReplayMiddleware = tracker.use(trackerRedux(<options>)); // check list of available options below

//...
const store = createStore(
  reducer,
  applyMiddleware(openReplayMiddleware) 
);

Orientieren Sie sich am folgenden Beispiel, wenn Ihre App SSR verwendet. Stellen Sie sicher, dass der Tracker erst läuft, sobald die App in der Browserumgebung ausgeführt wird.

'use client'
import { applyMiddleware, createStore } from 'redux';
import trackerRedux from '@openreplay/tracker-redux/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 openReplayMiddleware = tracker.use(trackerRedux(<options>)); // check list of available options below

const store = createStore( // You can define/use it anywhere in response handlers
  reducer,
  applyMiddleware(openReplayMiddleware)
);

//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
  //... Use store here
}

Mit Optionen können Sie das Verhalten der Middleware anpassen, um Ihre Daten zu bereinigen.

trackerRedux({
  actionFilter: action => action.type !== 'DRAW', // only actions which pass this test will be recorded
  actionTransformer: action => action.type === 'LOGIN' ? null : action,
  actionType: action => action.type // action type for search, that's the default one
  stateTransformer: state => {
    const { jwt, ..._state } = state;
    return _state;
  },
})

Ein praktisches Beispiel dafür, wie Sie dieses Plugin nutzen, um Zustandsänderungen in Ihren Session Replays zu erfassen, finden Sie in unserem ausführlichen Tutorial.

Haben Sie Probleme bei der Einrichtung dieses Plugins? Verbinden Sie sich mit unserem Slack und holen Sie sich Hilfe von unserer Community.