LogRocket ngrx Middleware

0.2.1 verified Sat Apr 25 auth: no javascript

LogRocket ngrx middleware (v0.2.1) is a companion package for LogRocket that augments session recordings with Redux actions and state from @ngrx/store. It integrates as an ngrx meta reducer to capture dispatched actions and store state snapshots, enabling developers to replay user sessions alongside application state changes. Requires LogRocket >=2 and @ngrx/store >=4. Minimal setup: add `logrocket-ngrx` to your meta reducers. Actively maintained by LogRocket, with weekly releases. Differentiates from generic Redux devtools by integrating directly with LogRocket's session replay and performance monitoring.

Common errors

error Cannot find module 'logrocket-ngrx' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install logrocket-ngrx and ensure it's in package.json dependencies.

error 'createLogRocketMetaReducer' is not exported from 'logrocket-ngrx' ↓

cause Using wrong import syntax or old version without named export.

fix

Use import { createLogRocketMetaReducer } from 'logrocket-ngrx'; with v0.1.0+.

error LogRocket is not defined ↓

cause LogRocket library not imported or initialized before meta reducer creation.

fix

Import and initialize LogRocket with LogRocket.init('your-app-id') before using createLogRocketMetaReducer.

Warnings

gotcha Initial state may not be recorded correctly in versions <0.1.1. ↓

fix Update to v0.1.1 or later.

gotcha Feature state may resend initial state events in versions <0.1.1. ↓

fix Update to v0.1.1 or later.

deprecated The old main entry file location changed in v0.1.0. ↓

fix Ensure import is 'logrocket-ngrx' (no subpath).

breaking Peer dependency on logrocket >=2 and @ngrx/store >=4. Incompatible with older versions. ↓

fix Upgrade logrocket and @ngrx/store to meet peer requirements.

Install

npm install logrocket-ngrx

yarn add logrocket-ngrx

pnpm add logrocket-ngrx

Imports

createLogRocketMetaReducer

wrong

const { createLogRocketMetaReducer } = require('logrocket-ngrx');

correct

import { createLogRocketMetaReducer } from 'logrocket-ngrx';

Package ships TypeScript types, but is CJS-compatible. Named export only.

Quickstart

Demonstrates how to add LogRocket ngrx middleware as a meta reducer in an Angular app with @ngrx/store.

import LogRocket from 'logrocket';
import { createLogRocketMetaReducer } from 'logrocket-ngrx';
import { StoreModule, MetaReducer } from '@ngrx/store';

LogRocket.init('your-app-id');

export const metaReducers: MetaReducer[] = [
  createLogRocketMetaReducer(LogRocket)
];

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