이 플러그인을 사용하면 NgRx 액션/상태를 캡처하여 세션 녹화를 재생하면서 나중에 확인할 수 있습니다. 문제를 파악하고 해결하는 데 매우 유용합니다.

npm i @openreplay/tracker-ngrx --save

생성된 메타 리듀서를 imports에 추가합니다. 자세한 내용은 NgRx 문서를 참고하세요.

import { StoreModule } from '@ngrx/store';
import trackerNgRx from '@openreplay/tracker-ngrx';
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 metaReducers = [tracker.use(trackerNgRx(<options>))]; // check list of available options below

tracker.start();

//...
@NgModule({
  imports: [StoreModule.forRoot({}, { metaReducers })]
})
export class AppModule {}

앱이 SSR인 경우 아래 예시를 따르세요. 앱이 시작된 후(useEffect 또는 componentDidMount 안에서) tracker.start()가 한 번 호출되도록 하세요.

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

미들웨어 동작을 커스터마이징하여 데이터를 정제할 수 있습니다.

trackerNgRx({
  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에 접속하여 커뮤니티의 도움을 받으세요.