NgRx

Plugin de NgRx para OpenReplay.

NgRx

Este plugin te permite capturar las acciones/el estado de NgRx e inspeccionarlos más tarde mientras reproduces las grabaciones de sesión. Esto es muy útil para entender y solucionar problemas.

npm i @openreplay/tracker-ngrx --save

Añade el meta-reducer generado a tus imports. Consulta la documentación de NgRx para más detalles.

Si tu sitio web es una aplicación de página única (SPA)

Section titled Si tu sitio web es una aplicación de página única (SPA)
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 {}

Si tu aplicación web se renderiza en el servidor (SSR)

Section titled Si tu aplicación web se renderiza en el servidor (SSR)

Sigue el ejemplo de abajo si tu aplicación es SSR. Asegúrate de que tracker.start() se llame una vez que la aplicación haya arrancado (en useEffect o 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 {}
}

Puedes personalizar el comportamiento del middleware para sanear tus datos.

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

¿Tienes problemas para configurar este plugin? Conéctate a nuestro Slack o visita nuestro Foro y obtén ayuda de nuestra comunidad.