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.
Instalación
Section titled Instalaciónnpm 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 {}
}
Opciones
Section titled OpcionesPuedes 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 preguntas?
Section titled ¿Tienes preguntas?¿Tienes problemas para configurar este plugin? Conéctate a nuestro Slack o visita nuestro Foro y obtén ayuda de nuestra comunidad.