Ngrx Store Logger

0.2.4 verified Thu Apr 23 auth: no javascript abandoned

ngrx-store-logger is an advanced logging meta-reducer for NgRx applications, providing detailed console output of actions and state changes. It is a direct port of `redux-logger`, offering features like customizable log levels (log, warn, error, info), collapsed log groups, action/state transformation, and filtering by whitelist or blacklist. The package is currently at version 0.2.4 and lists peer dependencies for `@ngrx/store` up to `^8.0.0`. Given that NgRx is now in version 17+ and the last commit to the repository was in 2019, this package is considered unmaintained and deprecated for modern NgRx applications. Its release cadence was irregular, and it is no longer receiving updates to keep up with NgRx's rapid evolution.

Common errors

error TypeError: Cannot read properties of undefined (reading 'metaReducers') ↓

cause The `metaReducers` property was not correctly passed in the configuration object to `StoreModule.forRoot` or `StoreModule.forFeature`.

fix

Ensure metaReducers is provided within the configuration object of StoreModule.forRoot(reducers, { metaReducers }) or StoreModule.forFeature(featureName, reducers, { metaReducers }).

error Error: Module not found: Error: Can't resolve 'ngrx-store-logger' ↓

cause The `ngrx-store-logger` package is not installed or incorrectly referenced in `package.json`.

fix

Run npm install ngrx-store-logger --save or yarn add ngrx-store-logger to install the package. Verify that it is listed in your project's dependencies or devDependencies.

error Type 'ActionReducer<State>' is not assignable to type 'ActionReducer<any, Action>' ↓

cause This usually occurs when the type of the `reducer` passed to `storeLogger` or the `metaReducers` array does not perfectly match NgRx's expected `ActionReducer` signature, especially after NgRx updates.

fix

Ensure that your logger function's return type and the metaReducers array elements explicitly align with NgRx's ActionReducer signature. Often, adding as any to the logger function's return, or to the meta-reducer in the array, can temporarily resolve type conflicts, but a better solution is to ensure compatible NgRx versions or a compatible logger.

Warnings

breaking ngrx-store-logger is incompatible with NgRx versions 9 and above due to significant changes in NgRx's reducer composition model with `createReducer` and `createAction`. The traditional meta-reducer pattern used by this library is not directly supported or recommended in the same way with modern NgRx. ↓

fix Migrate to NgRx's built-in `StoreDevtoolsModule` or consider custom logging solutions that are compatible with `createReducer` and `on` functions. If you must use a logger, look for alternatives designed for newer NgRx versions, such as `@ngrx/store-log-monitor` or custom middleware patterns compatible with NgRx Signals.

gotcha The package is no longer actively maintained. The last commit was in 2019, and it targets NgRx versions up to 8.0.0. Using it in newer Angular/NgRx projects will lead to compatibility issues, unaddressed bugs, and potential security vulnerabilities. ↓

fix Avoid using this package in new projects. For existing projects, consider migrating to `@ngrx/store-devtools` or implementing a custom logger using modern NgRx patterns. Regularly check the NgRx documentation for recommended practices for state debugging.

gotcha Enabling detailed logging in production environments can introduce significant performance overhead due to the processing and rendering of extensive state and action data in the browser console. It can also expose sensitive application state to end-users. ↓

fix Always conditionally enable `ngrx-store-logger` (or any logging middleware) only in development environments. The provided quickstart demonstrates how to use `environment.production` to achieve this. Ensure sensitive data is not logged, or use a `stateTransformer` to redact it.

Install

npm install ngrx-store-logger

yarn add ngrx-store-logger

pnpm add ngrx-store-logger

Imports

storeLogger
wrong
```
const storeLogger = require('ngrx-store-logger');
```
correct
```
import { storeLogger } from 'ngrx-store-logger';
```
The library is primarily used in an Angular/TypeScript environment, where ES Modules are standard. CommonJS `require` is generally incorrect.

LoggerOptions

wrong

import { LoggerOptions } from 'ngrx-store-logger/types';

correct

import { LoggerOptions } from 'ngrx-store-logger';

Type imports are directly from the main package entry point, no subpath is needed.

ActionReducer
wrong
```
import { ActionReducer } from 'ngrx-store-logger';
```
correct
```
import { ActionReducer } from '@ngrx/store';
```
`ActionReducer` is an NgRx type, not provided by `ngrx-store-logger` itself.

Quickstart

This quickstart demonstrates how to integrate `ngrx-store-logger` into an Angular NgRx application as a meta-reducer, conditionally enabling it for non-production environments. It shows the necessary imports, how to wrap `storeLogger` in an exported function, and its inclusion in `StoreModule.forRoot`.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule, ActionReducer } from '@ngrx/store';
import { storeLogger } from 'ngrx-store-logger';
import { environment } from '../environments/environment'; // Assume this exists for production check

interface State { /* Define your application state */ }

// Dummy reducers for demonstration
const initialState: State = { /* initial state properties */ };

function rootReducer(state: State | undefined, action: any): State {
  if (state === undefined) return initialState;
  // Handle actions and return new state
  return state;
}

export function logger(reducer: ActionReducer<State>): any {
  // Initialize logger with default options or custom ones
  return storeLogger({
    collapsed: true, // Collapse log groups by default
    duration: true, // Print duration with action
    timestamp: true // Print timestamp with action
  })(reducer);
}

// Conditionally apply logger only in development
export const metaReducers = !environment.production ? [logger] : [];

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot(
      rootReducer,
      { metaReducers }
    )
  ],
  declarations: [],
  providers: [],
  bootstrap: []
})
export class AppModule {}