Redux

This plugin allows you to capture Redux actions/state and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.

Installation

npm i @openreplay/tracker-redux --save

Usage

Initialize the tracker then put the generated middleware into your Redux chain.

If your website is a Single Page Application (SPA)

import { applyMiddleware, createStore } from 'redux';
import OpenReplay from '@openreplay/tracker';
import trackerRedux from '@openreplay/tracker-redux';

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
tracker.start();
const openReplayMiddleware = tracker.use(trackerRedux(<options>)); // check list of available options below

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

If your web app is Server-Side-Rendered (SSR)

Follow the below example if your app is SSR. Ensure tracker.start() is called once the app is started (in useEffect or componentDidMount).

import { applyMiddleware, createStore } from 'redux';
import OpenReplay from '@openreplay/tracker/cjs';
import trackerRedux from '@openreplay/tracker-redux/cjs';

const tracker = new OpenReplay({
  projectKey: PROJECT_KEY
});
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
}

Options

You can customize the middleware behavior with options to sanitize your data.

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

Tutorial

If you’re looking for a practical example of how to use this plugin to capture state changes in your session replays, check out our detailed tutorial over here.

Have questions?

Having trouble setting up this plugin? Please connect to our Slack or check out our Forum and get help from our community.