remote-redux-devtools

Pausing and locking features

Read the post for details about why and how to use them.

Added composeWithDevtools method

Instead of

import { createStore, applyMiddleware, compose } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';

const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware),
    devToolsEnhancer()
));

Now you should use:

  import { createStore, applyMiddleware } from 'redux';
  import { composeWithDevTools } from 'remote-redux-devtools';

  const store = createStore(reducer, /* preloadedState, */ composeWithDevTools(
    applyMiddleware(...middleware),
    // other store enhancers if any
  ));

or with parameters:

  import { createStore, applyMiddleware } from 'redux';
  import { composeWithDevTools } from 'remote-redux-devtools';

  const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });
  const store = composeWithDevTools(reducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(...middleware),
    // other store enhancers if any
  ));

As the result DevTools.updateStore is deprecated.

New options

• shouldRecordChanges (boolean) - if specified as false, it will not record the changes till clicking on Start recording button. Default is true.
• pauseActionType (string) - if specified, whenever clicking on Pause recording button and there are actions in the history log, will add this action type. If not specified, will commit when paused. Default is @@PAUSED.
• shouldStartLocked (boolean) - if specified as true, it will not allow any non-monitor actions to be dispatched till clicking on Unlock changes button. Default is false.
• shouldHotReload boolean - if set to false, will not recompute the states on hot reloading (or on replacing the reducers). Default to true.

• Optimized monitor actions.
• Lock changes.

• Better handling of reconnections.
• Log errors instead of warning (don't show YellowBoxes on React Native).

New options to sanitize states and actions:

• stateSanitizer - function which takes state object and index as arguments, and should return state object back.
• actionSanitizer - function which takes action object and id number as arguments, and should return action object back.

Example of usage:

export default function configureStore(initialState) {
  // Note: passing enhancer as last argument requires redux@>=3.1.0
  const store = createStore(
    rootReducer,
    initialState,
    devTools({
      actionSanitizer: (action) => (
       action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
       { ...action, data: '<<LONG_BLOB>>' } : action
      ),
      stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
    })
  );
  return store;
}

Downgraded socketcluster-client to fix Windows issues.

Added updateStore method, which you can use in case you have other enhancer / middlewares. So, when remote dispatching, they will be applied.

Usage:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import reducer from '../reducers';

export default function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(thunk),
    devTools()
  );
  // Note: passing enhancer as last argument requires redux@>=3.1.0
  const store = createStore(reducer, initialState, enhancer);
  // If you have other enhancers & middlewares
  // update the store after creating / changing to allow devTools to use them
  devTools.updateStore(store);
  return store;
}

• Optimization: State is not relayed twice when starting monitoring [#22]
• Remote actions are evaluated now on the client side with the ability to pass custom actionCreators:

Use the latest remotedev-app to get it work.

• Get correctly localhost for React Native (#31)
• Catch errors on devtools instrumentation only when needed (notes)

Catch and send exceptions occurred in the application

Added sendOnError parameter, which can be set to:

• 1: catch all exceptions from the application by binding to console.error, using window.onerror for browser and ErrorUtils for React Native, and send a @@remotedev/ERROR action with all the details.
• 2: catch only exceptions from reducers.

Will send logs even when realtime is set to false, but with post requests in this case without opening a connection.

Fixes:

• Don't skip onStart, onStop and onSend actions from payload.
• Don't throw on fetch errors.

Send data to the remote monitor with post requests (without opening a socket connection)

Check the demo here

The configuration will be like:

export default function configureStore(initialState) {
 return createStore(
    rootReducer,
    initialState,
    devTools({
      name: 'Android app', realtime: false,
      hostname: 'your-host.com', port: 8000,
      sendOn: 'SOME_ACTION_ERROR' // or array: ['LOGIN_ERROR', 'LOGOUT_ERROR']
      })
  );
}

Requires remotedev-server@^0.0.9.

Support secure connections

Added secure parameter, specifies whether to use https protocol for post requests and wss for socket connections. Requires remotedev-server@^0.0.8.

Remote monitoring in production

Use Remote Redux DevTools to monitor your web, React Native or hybrid apps not only in development, but also in production now!

Start or stop monitoring by using specific actions (for example SOME_ACTION_ERROR).

Check the demo here

It implies that for production you'll host remotedev-server on your side.

The configuration will be like:

export default function configureStore(initialState) {
 return createStore(
    rootReducer,
    initialState,
    devTools({
      name: 'Android app', realtime: false,
      hostname: 'your-host.com', port: 8000,
      startOn: 'SOME_ACTION_ERROR' // or array: ['LOGIN_ERROR', 'LOGOUT_ERROR']
      })
  );
}

For development

If you have process.env.NODE_ENV === 'development', just use devTools() as before and all the changes will be monitored. Otherwise set realtime option to true (devTools({ realtime: true })), but make sure to have it in the development only.

Relay the whole liftedState when started (#22).

Support importing state history. Export / import from a file is implemented on [email protected].

Don't affect the app's performance when not monitored (#20): relay changes only when monitors require it.
It requires using remotedev-app@^0.3.4 and remotedev-server@^0.0.7 (if not using remote server).

Fixed the issue from last commit, when no options passed (#19)

• Don't install react anymore, using redux-devtools-instrument. Fix naming collisions like in #11.
• Implement maxAge option. Limit number of maximum allowed actions to be stored on the history tree by default to 30.

• Warn instead of erroring when connection fails (#18)
• Support store.dispatch request from the monitor app (#17)

• Fixed filtering monitor actions

• Add optional filters to reduce noise (#12).
• Just warn when socket is not available instead of showing errors, not to be caught inside the app.

• Set default hostname if port is set.
• Remove direct redux dependency and encourage to use new redux API.
• Update dependencies to fix some issues in socketcluster and redux-devtools.