openreplay/tracker/tracker-redux
2024-05-30 14:10:15 +02:00
..
build move redux plugin hashing to worker thread, update redux panel look and style 2024-04-09 14:47:31 +02:00
script move redux plugin hashing to worker thread, update redux panel look and style 2024-04-09 14:47:31 +02:00
src feat tracker: release tracker v13 2024-05-30 14:10:15 +02:00
.gitignore feat: tracker init 2021-05-03 13:31:55 +02:00
.npmignore feat: tracker init 2021-05-03 13:31:55 +02:00
.prettierrc.json feat: tracker init 2021-05-03 13:31:55 +02:00
bun.lockb feat tracker: release tracker v13 2024-05-30 14:10:15 +02:00
LICENSE MIT license for OpenReplay protocol 2022-08-30 19:04:32 +02:00
package.json feat tracker: release tracker v13 2024-05-30 14:10:15 +02:00
README.md Fix typos (#15) 2021-06-04 11:02:53 +02:00
rollup.config.js move redux plugin hashing to worker thread, update redux panel look and style 2024-04-09 14:47:31 +02:00
tsconfig-cjs.json feat: tracker init 2021-05-03 13:31:55 +02:00
tsconfig.json fix tracker speed up redux plugin hashing (#2027) 2024-04-03 11:07:29 +02:00

OpenReplay Tracker Redux plugin

A Redux middleware for OpenReplay Tracker. This middleware allows you to see the application state during session replay.

Installation

npm i @openreplay/tracker-redux

Usage

Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated middleware into your Redux chain.

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

const tracker = new Tracker({
  projectKey: YOUR_PROJECT_KEY,
});

const openReplayMiddleware = tracker.use(trackerRedux());

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

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