redux-logger

What is redux-logger?

redux-logger is a middleware for Redux that logs actions and state changes to the console, making it easier to debug and understand the flow of data in your application.

What are redux-logger's main functionalities?

Basic Logging

This feature logs every action and the resulting new state to the console. It helps developers see what actions are being dispatched and how the state is changing in response.

const { createStore, applyMiddleware } = require('redux');
const logger = require('redux-logger').createLogger();
const reducer = (state = {}, action) => state;
const store = createStore(reducer, applyMiddleware(logger));
store.dispatch({ type: 'TEST_ACTION' });

Collapsed Logging

This feature collapses the log entries for each action, making the console output more compact and easier to navigate, especially when dealing with a large number of actions.

const { createStore, applyMiddleware } = require('redux');
const { createLogger } = require('redux-logger');
const logger = createLogger({ collapsed: true });
const reducer = (state = {}, action) => state;
const store = createStore(reducer, applyMiddleware(logger));
store.dispatch({ type: 'TEST_ACTION' });

Predicate Logging

This feature allows you to filter which actions get logged based on a predicate function. In this example, actions of type 'IGNORED_ACTION' will not be logged.

const { createStore, applyMiddleware } = require('redux');
const { createLogger } = require('redux-logger');
const logger = createLogger({ predicate: (getState, action) => action.type !== 'IGNORED_ACTION' });
const reducer = (state = {}, action) => state;
const store = createStore(reducer, applyMiddleware(logger));
store.dispatch({ type: 'TEST_ACTION' });
store.dispatch({ type: 'IGNORED_ACTION' });

Other packages similar to redux-logger

redux-devtools-extension

redux-devtools-extension is a package that integrates Redux with the Redux DevTools browser extension. It provides a more visual and interactive way to inspect actions and state changes, including time-travel debugging, which is not available in redux-logger.

redux-immutable-state-invariant

redux-immutable-state-invariant is a middleware that logs warnings when the state is mutated. While it doesn't log actions and state changes like redux-logger, it helps catch bugs related to state mutations, which can be a complementary tool for debugging Redux applications.

README

Logger for Redux

Table of contents

• Install
• Usage
• API
• Recipes
  • Log only in development
  • Transform Symbol() action type to string
  • Log everything except actions with certain type
  • Collapse actions with certain type
  • Transform Immutable (without combineReducers)
  • Transform Immutable (with combineReducers)
  • Log batched actions
• Known issues (with react-native only at this moment)
• License

Install

npm i --save redux-logger

Usage

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';

const logger = createLogger();
const store = createStore(
  reducer,
  applyMiddleware(thunk, promise, logger)
);

// Note passing middleware as the third argument requires redux@>=3.1.0

Logger must be the last middleware in chain, otherwise it will log thunk and promise, not actual actions (#20).

API

redux-logger exposes single constructor function for creating logger middleware.

createLogger(options?: Object) => LoggerMiddleware

Options

{
  level = 'log': 'log' | 'console' | 'warn' | 'error' | 'info', // console's level
  duration = false: Boolean, // Print the duration of each action?
  timestamp = true: Boolean, // Print the timestamp with each action?
  colors: ColorsObject, // Object with color getters. See the ColorsObject interface.
  logger = console: LoggerObject, // Implementation of the `console` API.
  logErrors = true: Boolean, // Should the logger catch, log, and re-throw errors?
  collapsed, // Takes a boolean or optionally a function that receives `getState` function for accessing current store state and `action` object as parameters. Returns `true` if the log group should be collapsed, `false` otherwise.
  predicate, // If specified this function will be called before each action is processed with this middleware.
  stateTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
  actionTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
  errorTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
  titleFormatter, // Format the title used when logging actions.
  diff = false: Boolean, // Show diff between states.
  diffPredicate // Filter function for showing states diff.'
}

Options

level (String | Function | Object)

Level of console. warn, error, info or else.

It can be a function (action: Object) => level: String.

It can be an object with level string for: prevState, action, nextState, error

It can be an object with getter functions: prevState, action, nextState, error. Useful if you want to print message based on specific state or action. Set any of them to false if you want to hide it.

• prevState(prevState: Object) => level: String
• action(action: Object) => level: String
• nextState(nextState: Object) => level: String
• error(error: Any, prevState: Object) => level: String

Default: log

duration (Boolean)

Print duration of each action?

Default: false

timestamp (Boolean)

Print timestamp with each action?

Default: true

colors (Object)

Object with color getter functions: title, prevState, action, nextState, error. Useful if you want to paint message based on specific state or action. Set any of them to false if you want to show plain message without colors.

• title(action: Object) => color: String
• prevState(prevState: Object) => color: String
• action(action: Object) => color: String
• nextState(nextState: Object) => color: String
• error(error: Any, prevState: Object) => color: String

logger (Object)

Implementation of the console API. Useful if you are using a custom, wrapped version of console.

Default: console

logErrors (Boolean)

Should the logger catch, log, and re-throw errors? This makes it clear which action triggered the error but makes "break on error" in dev tools harder to use, as it breaks on re-throw rather than the original throw location.

Default: true

collapsed = (getState: Function, action: Object) => Boolean

Takes a boolean or optionally a function that receives getState function for accessing current store state and action object as parameters. Returns true if the log group should be collapsed, false otherwise.

Default: false

predicate = (getState: Function, action: Object) => Boolean

If specified this function will be called before each action is processed with this middleware. Receives getState function for accessing current store state and action object as parameters. Returns true if action should be logged, false otherwise.

Default: null (always log)

stateTransformer = (state: Object) => state

Transform state before print. Eg. convert Immutable object to plain JSON.

Default: identity function

actionTransformer = (action: Object) => action

Transform action before print. Eg. convert Immutable object to plain JSON.

Default: identity function

errorTransformer = (error: Any) => error

Transform error before print.

Default: identity function

titleFormatter = (action: Object, time: String?, took: Number?) => title

Format the title used for each action.

Default: prints something like action @ ${time} ${action.type} (in ${took.toFixed(2)} ms)

diff (Boolean)

Show states diff.

Default: false

diffPredicate = (getState: Function, action: Object) => Boolean

Filter states diff for certain cases.

Default: undefined

Recipes

Log only in development

import thunk from 'redux-thunk';

const middlewares = [thunk];

if (process.env.NODE_ENV === `development`) {
  const createLogger = require(`redux-logger`);
  const logger = createLogger();
  middlewares.push(logger);
}

const store = compose(applyMiddleware(...middlewares))(createStore)(reducer);

Transform Symbol() action type to string

import createLogger from 'redux-logger';

const logger = createLogger({
  actionTransformer: (action) => ({
    ...action,
    type: String(action.type),
  })
});

Log everything except actions with certain type

createLogger({
  predicate: (getState, action) => action.type !== AUTH_REMOVE_TOKEN
});

Collapse actions with certain type

createLogger({
  collapsed: (getState, action) => action.type === FORM_CHANGE
});

Transform Immutable (without combineReducers)

import { Iterable } from 'immutable';

const stateTransformer = (state) => {
  if (Iterable.isIterable(state)) return state.toJS();
  else return state;
};

const logger = createLogger({
  stateTransformer,
});

Transform Immutable (with combineReducers)

const logger = createLogger({
  stateTransformer: (state) => {
    let newState = {};

    for (var i of Object.keys(state)) {
      if (Immutable.Iterable.isIterable(state[i])) {
        newState[i] = state[i].toJS();
      } else {
        newState[i] = state[i];
      }
    };

    return newState;
  }
});

Log batched actions

Thanks to @smashercosmo

import createLogger from 'redux-logger';

const actionTransformer = action => {
  if (action.type === 'BATCHING_REDUCER.BATCH') {
    action.payload.type = action.payload.map(next => next.type).join(' => ');
    return action.payload;
  }

  return action;
};

const level = 'info';

const logger = {};

for (const method in console) {
  if (typeof console[method] === 'function') {
    logger[method] = console[method].bind(console);
  }
}

logger[level] = function levelFn(...args) {
  const lastArg = args.pop();

  if (Array.isArray(lastArg)) {
    return lastArg.forEach(item => {
      console[level].apply(console, [...args, item]);
    });
  }

  console[level].apply(console, arguments);
};

export default createLogger({
  level,
  actionTransformer,
  logger
});

Known issues

• Performance issues in react-native (#32)

License

MIT