Log every Redux action in your app and the associated state.

To add Redux logs to a LogRocket report, you need to add a store middleware to your Redux store by calling LogRocket.reduxMiddleware()

import { createStore } from 'redux';

const store = createStore(
  reducer, // your app reducer
  applyMiddleware(LogRocket.reduxMiddleware())
);

If you use other middlewares, LogRocket should be the final middleware:

import { applyMiddleware, createStore } from 'redux';

const store = createStore(
  reducer, // your app reducer
  applyMiddleware(middlewares, LogRocket.reduxMiddleware())
);

πŸ“˜

Where to put LogRocket.reduxMiddleware()

Most apps separate their analytics calls (like LogRocket) from their Redux store initialization. It's perfectly fine to call reduxMiddleware() before calling init().

Configuration

An optional configuration object can be passed into LogRocket.reduxMiddleware(config).
This object can be used to sanitize the Redux state and/or Redux actions before they are logged.

stateSanitizer
optional - function

A stateSanitizer function can be used to scrub the Redux state.

To scrub the state, return a modified copy of the state.

LogRocket.reduxMiddleware({
  stateSanitizer: function (state) {
    return {
      ...state,
      removeThisKey: undefined,
    };
  },
});

πŸ“˜

Immutable.js

If you are using Immutable.js, LogRocket automatically serializes the Immutable state via the toJSON() method.

actionSanitizer
optional - function

An actionSanitizer function can be used to scrub or ignore an action.

To ignore an action, return null. To scrub the action, return a modified copy of the action.

LogRocket.reduxMiddleware({
  actionSanitizer: function (action) {
    if (action.type === 'ignoreThis') {
      return null;
    }
    return action;
  },
});
LogRocket.reduxMiddleware({
  actionSanitizer: function (action) {
    return {
      ...action,
      removeThisKey: undefined,
    };
  },
});

Performance and Bandwidth Usage

We compress all actions and state objects to a binary format, and perform diffs on your Redux state to minimize the data over the network.