このプラグインを使用すると、Redux のアクションとステートをキャプチャし、セッション録画の再生中に後から確認できます。問題の把握と修正に非常に役立ちます。

npm i @openreplay/tracker-redux --save

トラッカーを初期化し、生成されたミドルウェアを Redux のチェーンに組み込みます。

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

アプリが SSR の場合は、以下の例に従ってください。 アプリがブラウザ環境で実行されてからトラッカーが動作するようにしてください。

'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
}

ミドルウェアの動作をオプションでカスタマイズして、データをサニタイズできます。

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

このプラグインを使用してセッションリプレイ内のステートの変更をキャプチャする実践的な例をお探しの場合は、詳細なチュートリアルをご覧ください。

このプラグインのセットアップで問題が発生した場合は、Slack に参加して、コミュニティのサポートを受けてください。