{"id":17833,"library":"ngrx-store-logger","title":"Ngrx Store Logger","description":"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.","status":"abandoned","version":"0.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/btroncone/ngrx-store-logger","tags":["javascript","redux","ngrx","store","logger","middleware","rxjs","typescript"],"install":[{"cmd":"npm install ngrx-store-logger","lang":"bash","label":"npm"},{"cmd":"yarn add ngrx-store-logger","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngrx-store-logger","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core state management library that ngrx-store-logger integrates with as a meta-reducer.","package":"@ngrx/store","optional":false},{"reason":"Required for any NgRx application as NgRx itself is built on Angular.","package":"@angular/core","optional":false}],"imports":[{"note":"The library is primarily used in an Angular/TypeScript environment, where ES Modules are standard. CommonJS `require` is generally incorrect.","wrong":"const storeLogger = require('ngrx-store-logger');","symbol":"storeLogger","correct":"import { storeLogger } from 'ngrx-store-logger';"},{"note":"Type imports are directly from the main package entry point, no subpath is needed.","wrong":"import { LoggerOptions } from 'ngrx-store-logger/types';","symbol":"LoggerOptions","correct":"import { LoggerOptions } from 'ngrx-store-logger';"},{"note":"`ActionReducer` is an NgRx type, not provided by `ngrx-store-logger` itself.","wrong":"import { ActionReducer } from 'ngrx-store-logger';","symbol":"ActionReducer","correct":"import { ActionReducer } from '@ngrx/store';"}],"quickstart":{"code":"import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { StoreModule, ActionReducer } from '@ngrx/store';\nimport { storeLogger } from 'ngrx-store-logger';\nimport { environment } from '../environments/environment'; // Assume this exists for production check\n\ninterface State { /* Define your application state */ }\n\n// Dummy reducers for demonstration\nconst initialState: State = { /* initial state properties */ };\n\nfunction rootReducer(state: State | undefined, action: any): State {\n  if (state === undefined) return initialState;\n  // Handle actions and return new state\n  return state;\n}\n\nexport function logger(reducer: ActionReducer<State>): any {\n  // Initialize logger with default options or custom ones\n  return storeLogger({\n    collapsed: true, // Collapse log groups by default\n    duration: true, // Print duration with action\n    timestamp: true // Print timestamp with action\n  })(reducer);\n}\n\n// Conditionally apply logger only in development\nexport const metaReducers = !environment.production ? [logger] : [];\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    StoreModule.forRoot(\n      rootReducer,\n      { metaReducers }\n    )\n  ],\n  declarations: [],\n  providers: [],\n  bootstrap: []\n})\nexport class AppModule {}\n","lang":"typescript","description":"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`."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=9.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.2.5"},{"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.","message":"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.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure `metaReducers` is provided within the configuration object of `StoreModule.forRoot(reducers, { metaReducers })` or `StoreModule.forFeature(featureName, reducers, { metaReducers })`.","cause":"The `metaReducers` property was not correctly passed in the configuration object to `StoreModule.forRoot` or `StoreModule.forFeature`.","error":"TypeError: Cannot read properties of undefined (reading 'metaReducers')"},{"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`.","cause":"The `ngrx-store-logger` package is not installed or incorrectly referenced in `package.json`.","error":"Error: Module not found: Error: Can't resolve 'ngrx-store-logger'"},{"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.","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.","error":"Type 'ActionReducer<State>' is not assignable to type 'ActionReducer<any, Action>'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}