NgRx
This plugin allows you to capture NgRx
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-ngrx --save
Usage
Add the generated meta-reducer into your imports
. See NgRx documentation for more details.
If your website is a Single Page Application (SPA)
import { StoreModule } from '@ngrx/store';import OpenReplay from '@openreplay/tracker';import trackerNgRx from '@openreplay/tracker-ngrx';//...const tracker = new OpenReplay({projectKey: PROJECT_KEY});const metaReducers = [tracker.use(trackerNgRx(<options>))]; // check list of available options belowtracker.start();//...@NgModule({imports: [StoreModule.forRoot({}, { metaReducers })]})export class AppModule {}
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 { StoreModule } from '@ngrx/store';import OpenReplay from '@openreplay/tracker/cjs';import trackerNgRx from '@openreplay/tracker-ngrx/cjs';//...const tracker = new OpenReplay({projectKey: PROJECT_KEY});const metaReducers = [tracker.use(trackerNgRx(<options>))]; // check list of available options below//...@NgModule({imports: [StoreModule.forRoot({}, { metaReducers })]})export class AppModule {}}
Options
You can customize the middleware behavior to sanitize your data.
trackerNgRx({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;},})
Troubleshooting
Having trouble setting up this plugin? please connect to our Slack and get help from our community.