Registry / observability / ngrx-store-logger

ngrx-store-logger

library0.2.4jsnpmunverified

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.

observability

npm install ngrx-store-logger

github ↗package ↗

INSTALL

IMPORT

SIG · NGRX-STORE-LOGGER

ngrx-store-logger

observabilityjavascriptv0.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

storeLogger

✓ import { storeLogger } from 'ngrx-store-logger';

✗ const storeLogger = require('ngrx-store-logger');

The library is primarily used in an Angular/TypeScript environment, where ES Modules are standard. CommonJS `require` is generally incorrect.

LoggerOptions

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

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

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

ActionReducer

✓ import { ActionReducer } from '@ngrx/store';

✗ import { ActionReducer } from 'ngrx-store-logger';

`ActionReducer` is an NgRx type, not provided by `ngrx-store-logger` itself.

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

Debug

Known issues

breakingngrx-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.

affects: >=9.0.0

gotchaThe 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.

affects: >=0.2.5

gotchaEnabling 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.

affects: *

Errors

Common errors & fixes

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

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: Module not found: Error: Can't resolve 'ngrx-store-logger'

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`.

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

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.

Upgrade

Version history

0.2.4latest on npm

Audit

Dependencies

@ngrx/storerequiredCore state management library that ngrx-store-logger integrates with as a meta-reducer.

@angular/corerequiredRequired for any NgRx application as NgRx itself is built on Angular.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/btroncone/ngrx-store-logger ↗

packagehttps://www.npmjs.com/package/ngrx-store-logger ↗