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 belowconst store = createStore( // You can define/use it anywhere in response handlersreducer,applyMiddleware(openReplayMiddleware));//...function MyApp() {useEffect(() => { // use componentDidMount in case of React Class Componenttracker.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 recordedactionTransformer: action => action.type === 'LOGIN' ? null : action,actionType: action => action.type // action type for search, that's the default onestateTransformer: 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.
Troubleshooting
Having trouble setting up this plugin? please connect to our Slack and get help from our community.