Changelog

• fix: use Object.assign() instead of object spread operator because non-standard feature #229
• fix: removed babel: {} options from package.json
• fix: remove dangling comma because non-standard feature #230
• fix: remove module and jsnext:main properties from package.json

UPD: broken because #229

Internal build tools updates.

Changelog

• webpack → rollup (#227)

Changelog

• fix: ignore color formatting with custom titleFormatter (#216)

Breaking change

In 2.9.0 we introduced default logger, but this led to problems (#210).

It was so bad that we publish 3 broken versions. So, we decided made a breaking change: by default we now export logger with default options and createLogger is now coming as named import.

TL;DR

You need to change your import

import { applyMiddleware, createStore } from 'redux'

- import createLogger from 'redux-logger'
+ import { createLogger } from 'redux-logger'
// or
- var createLogger = require('redux-logger')
+ var createLogger = require('redux-logger').createLogger

const logger = createLogger()

const store = createStore(
  reducer,
  applyMiddleware(logger)
)

or use logger with default settings

import { applyMiddleware, createStore } from 'redux'
import logger from 'redux-logger'
// or const { logger } = require('redux-logger')

const store = createStore(
  reducer,
  applyMiddleware(logger)
)

Changelog

• fix: require() was broken in 2.9.0+, now it fixed and works as expected (#210)

Thankfully to @LestaD and Russian-speaking @react_js community in Telegram now we have better readability (#209)

Now

Before

It's more friendly for newcomers and now recommended way to use redux-logger.

So, you can import default logger and use it with default options:

import { logger } from 'redux-logger'

const store = createStore(
  reducer,
  applyMiddleware(logger)
)

Changelog

• expose default logger (import { logger } from 'redux-logger)
• expose default settings (import { defaults } from 'redux-logger): useful if you use custom colors object and tired type default settings.

Instead of

import createLogger from 'redux-logger'

const logger = createLogger({
  colors: {
    prevState: () => `#9E9E9E`,
    action: () => `#03A9F4`,
    nextState: () => `#4CAF50`,
    error: () => `#F20404`,
    title: ({ type }) => {
      if (type.indexOf(`started`) > -1) return `orange`;
      if (type.indexOf(`failed`) > -1) return `#F20404`;
      if (type.indexOf(`succeeded`) > -1) return `#4CAF50`;
      if (type.indexOf(`update`) > -1) return `#03A9F4`;

      return `inherit`;
    }
  }
})

you can

import createLogger, { defaults } from 'redux-logger'

const logger = createLogger({
  colors: {
    ...defaults.colors,
    title: ({ type }) => {
      if (type.indexOf(`started`) > -1) return `orange`;
      if (type.indexOf(`failed`) > -1) return `#F20404`;
      if (type.indexOf(`succeeded`) > -1) return `#4CAF50`;
      if (type.indexOf(`update`) > -1) return `#03A9F4`;

      return `inherit`;
    }
  }
})

Now we throw error if logger is not initialized via createLogger(), thanks to @arbesfeld (#204)

Remember this recipe?

import createLogger from 'redux-logger';

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

No more!

Changelog

• feat: implicitly convert action.type to String() in console.log (#195, #194, #106, #129, #128, #14, etc)

Changelog

• feat: add logEntry param in collapsed option (#200)
• fix: don't stringify output in diff (#182)

Changelog

• fix: revert changes from #185 because redux-logger was broken in node.js

Sorry for this, I was not careful and didn't tested that PR

Changelog

• default title transformer has redundant symbols when timestamp is disabled (#186)

Changelog

• fix undefined console in IE9 (#185)

Diff

@sibelius merged redux-diff-logger and now you can use it by passing diff: true to options in createLogger(), f.e.

const logger = createLogger({
  diff: true,
});

❗️ Diff is very unstable and not tested, so we don't recommend use it as primary feature of logging.

Formatter for title

@spalger made titleFormatter option (#165)

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)

Bugfixes

• fix: performance now checking for null and don't fail with TypeError (#173)
• fix: default color of title now inherits console's default color (#176)

Changelog

fix: broken level option when specified object or function (#135)

Fine-grained control over level 🚀

Thankfully to @mathieudutour now we have very useful feature: fine-grained control over level.

function

const logger = createLogger({
  level: (action) => action.type === `SET_AUTH_TOKEN` ? `warning` : `log`
});

object

const logger = createLogger({
  level: {
    prevState: `log`,
    action: `info`,
    nextState: `log`,
    error: `error`,
  },
});

object with functions

const logger = createLogger({
  level: {
    prevState: false, // disable message of prevState
    action: ({ type }) => type.indexOf(`redux-form`) > -1 ? false : `info`, // don't show messages from redux-form (sorry, erikras, it's for demo only!)
    nextState: ({ type }) => type.indexOf(`user`) > -1 ? `warning` : `info`, // show nextState as warning if action is user-related
    error: `error`,
  },
});

New action title! 💃

Now it's more accurate and structured and looks like table.

Before

After

Changelog

• fix: a bug where Date() was being passed a timer value from performance.now() instead of a proper date/time (#125, #131)

redux-logger now supports server-side rendering without pain :tada:

Chanelog

• fixed: replaced window.console for console as default value for logger option (#121)

Changelog

• fix: log order was messed when store dispatched new action in response of previous (thanks, @jetzhliu, #102)
• fix: next state wasn't logged when spawned error (thanks, @cappslock, #115)

Changelog

Updates for error feature.

• feature: error color,
• feature: logErrors option (true or false),
• feature: errorTransfomer

Thanks @hon2a, #107.

Changelog

• feature: action will be logged as error when it fails during execution (thanks @hon2a, #103)

Changelog

• feature: colors.title with action argument for better color management

Thankfully to @af and #100 now you can paint even title! 💅 For example, you can paint title for red if action has fail in type.

const logger = createLogger({
  colors: {
    title: (action) => {
      if (action.type.indexOf(`fail`)) {
        return `red`;
      } else {
        return `#111`;
      }
    };
  }
})

Changelog

• fix: if duration or timestamp was false, it logged as false (#99, #101)

Changelog

• fix: babel 6 exported { default: [ Function ] } instead of [ Function ] by default (#98)

Changelog

• fix: action must be executed after prevState and before nextState (#97)

Changelog

• deprecated: transformer is deprecated, use stateTransformer instead
• feature: colors object

Colors

We have so much requests (#91, #94 and other) about control over messages, so we bring it to life 🎉 Logger now have colors: Object option with 3 keys: prevState, action, nextState, each must return color as string (for example, red or #03A9F4).

• prevState(prevState: Object) => color: String
• action(action: Object) => color: String
• nextState(nextState: Object) => color: String

colors also can be false if you don't need paint message or your env doesn't support console formatting (#92).

Examples

Disable colors

const logger = createLogger({
  colors: false
});

Paint action message with type AUTH_TOKEN_REMOVE to red

const logger = createLogger({
  colors: {
    prevState: () => `#9E9E9E`,
    action: (action) => action.type === `AUTH_REMOVE_TOKEN` && `red`,
    nextState: () => `#4CAF50`,
  }
});

Changelog

• fix: internal polyfill for repeat method used in pad function (#46, #47)

Changelog

• fix: log didn't work when collapsed was true (thanks @steida, #45)

Changelog

• feature: added ms to timestamp (thanks @toxickg, #42)