gaearon / redux-devtools-log-monitor

The default monitor for Redux DevTools with a tree view

Redux DevTools Log Monitor

The default monitor for Redux DevTools with a tree view.
It shows a log of states and actions, and lets you change their history.

Installation

npm install --save-dev redux-devtools-log-monitor

Usage

You can use LogMonitor as the only monitor in your app:

containers/DevTools.js

import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';

export default createDevTools(
  <LogMonitor />
);

Then you can render <DevTools> to any place inside app or even into a separate popup window.

Alternative, you can use it together with DockMonitor to make it dockable.
Consult the DockMonitor README for details of this approach.

Read how to start using Redux DevTools.

Features

Every action is displayed in the log. You can expand the tree view to inspect the action object and the state after it.

If a reducer throws while handling an action, you will see “Interrupted by an error up the chain” instead of the state and action tree view. Scroll up until you find the action which caused the error. You will see the error message in the action log entry. If you use a hot reloading tool, you can edit the reducer, and the error will automatically update or go away.

Clicking an action will disable it. It will appear crossed out, and the state will be recalculated as if the action never happened. Clicking it once again will enable it back. Use this together with a hot reloading solution to work sequentially on different states of your app without reproducing them by hand. You can toggle any action except for the initial one.

There are four buttons at the very top. “Reset” takes your app to the state you created the store with. The other three buttons work together. You might find it useful to think of them like you think of Git commits. “Commit” removes all actions in your log, and makes the current state your initial state. This is useful when you start working on a feature and want to remove the previous noise. After you’ve dispatched a few actions, you can press “Revert” to go back to the last committed state. Finally, if you dispatched some actions by mistake and you don’t want them around, you can toggle them by clicking on them, and press “Sweep” to completely remove all currently disabled actions from the log.

Props

Name	Description
theme	Either a string referring to one of the themes provided by redux-devtools-themes (feel free to contribute!) or a custom object of the same format. Optional. By default, set to 'nicinabox'.
select	A function that selects the slice of the state for DevTools to show. For example, state => state.thePart.iCare.about. Optional. By default, set to state => state.
preserveScrollTop	When true, records the current scroll top every second so it can be restored on refresh. This only has effect when used together with persistState() enhancer from Redux DevTools. By default, set to true.
expandActionRoot	When true, displays the action object expanded rather than collapsed. By default, set to true.
expandStateRoot	When true, displays the state object expanded rather than collapsed. By default, set to true.
markStateDiff	When true, mark the state's values which were changed comparing to the previous state. It affects the performance significantly! You might also want to set expandStateRoot to true as well when enabling it. By default, set to false.
hideMainButtons	When true, will show only the logs without the top button bar. By default, set to false.

License

MIT

redux-devtools-log-monitor's Issues

Optimize performance!

This project is ripe for performance optimizations. There’s a ton of low hanging fruit here. I think we can get 10x better performance if somebody just spends a day with ReactPerf and finds where all the wasted renders are coming from, and optimizes allocations from inline styles that almost never change. Any volunteers?

Guide to optimizing React performance: http://benchling.engineering/deep-dive-react-perf-debugging/

redux store.subscribe is firing repeatedly once I use log monitor.

I have a redux store.subscribe that fires the function its past about once a second once I start using the LogMonitor. The project is very tiny with one reducer with 3 actions and only 3 components. I can console all the actions and know I'm not spamming it. Is this normal behavior? It's totally possible I'm blaming the wrong library but this seems to be the point at which the problem is starting.

Needs a feature to copy/paste or download the current state object

I've had a few situations where it would be really convenient for me to get a copy of just the current state object either saved to a pretty-printed JSON file or copied to the clipboard. The existing download button is similar, but since it downloads actions and computed state, I have to shave a few more yaks to get a clean copy of the state object.

The current best solution I have is to use react-devtools to select my <Provider/> component and then paste JSON.stringify($r.store.getState()) into the console. This works, but requires multiple unintuitive clicks, remembering or finding that code snippet, and then formatting the output.

Since this is something I run into often, it would reduce a lot of friction to have a more streamlined solution, like a "Copy current state to Clipboard" button somewhere in the UI. Another user suggested being able to copy the contents of the log monitor panel just by clicking and dragging, which is another potential solution that would work for this use case.

I'm more than happy to open a PR for this and implement the feature, but before I spend a lot of time on it, I just wanted to check whether or not this is a feature you'd be interested in merging, and if you have any thoughts about the design of the UI/UX for this feature.

Should be import debounce from 'lodash/debounce';

The file line: https://github.com/gaearon/redux-devtools-log-monitor/blob/master/src/LogMonitor.js#L10

import debounce from 'lodash.debounce';

Should be:

import debounce from 'lodash/debounce';

So that not load the whole lodash library.

(Because I want logger be included in production mode with a switch to turn on or off)

Sort state keys alphabetically

Can we add ability to show state keys in alphabetical order?

Style gets messed up after a few actions

I have no idea why this is happening. I'm using redux in the Firefox debugger and I just integrated the latest (3.0.0) redux-devtools, and it looks like this:

I fixed that undefined that we were seeing earlier. I'm rendering it like this:

    const win = window.open(
      'data:text/html,<!DOCTYPE html><html style="height:100%"><body style="height:100%;margin:0"></body></html>',
      "redux-devtools",
      "menubar=no,location=no,resizable=yes,scrollbars=no,status=no"
    );

    // Install the devtools. Timeout just to be sure (just for testing)
    setTimeout(() => {
      React.render(
        React.createElement(
          Provider, { store: store },
          React.createElement(reduxDevTools)
        ),
        win.document.body
      );
    }, 500);

Add prop to "startCollapsed"

I care most about "what actions are fired" and very rarely about "what is the current state of my stores". Because of this, it would like a way to specify in the devtools to always start in a fully collapsed view for the root JSONTree node. Like this:

This way I maximize the view on the names of the actions and not on the very large list of stores in our app.

Can you please add a prop to allow the LogMonitor to collapse the root nodes by default?

React 16

Hey there.
Does this tool work with react 16?
I have issues like :

warning.js:33 Warning: Expected `onClick` listener to be a function, instead got a value of `boolean` type.
    in label (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONObjectNode)
    in JSONObjectNode (created by JSONNode)
    in JSONNode (created by JSONNestedNode)
    in ul (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONObjectNode)
    in JSONObjectNode (created by JSONNode)
    in JSONNode (created by JSONTree)
    in ul (created by JSONTree)
    in JSONTree (created by LogMonitorEntry)
    in div (created by LogMonitorEntry)
    in div (created by LogMonitorEntry)
    in LogMonitorEntry (created by LogMonitorEntryList)
    in div (created by LogMonitorEntryList)
    in LogMonitorEntryList (created by LogMonitor)
    in div (created by LogMonitor)
    in div (created by LogMonitor)
    in LogMonitor
    in FilterMonitor
    in div (created by Dock)
    in div (created by Dock)
    in div (created by Dock)
    in Dock (created by DockMonitor)
    in DockMonitor (created by Connect(DockMonitor))
    in Connect(DockMonitor) (created by DevTools)
    in DevTools (created by Root)
    in div (created by Root)
    in MuiThemeProvider (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

Could we make redux-logger and this tool more working together?

I am thinking of a log4j approach where appenders are what monitors are here. Then you have a root logger (redux-logger) and appenders use that. Everything the root logger has filtered or transformed is visible to the appenders. That way you'd have a single source of truth.

My redux-logger is configured as follow:

const actionBlackList = ["EFFECT_TRIGGERED", "EFFECT_RESOLVED", "EFFECT_REJECTED"]
const logger = createLogger({
  predicate: (getState, { type }) => actionBlackList.indexOf(type) === -1,
  level: ({ error = false }) => error ? "error" : "log",
  actionTransformer: ({ payload, ...action }) => ({ ...action, ...payload })
})

And it would be nice of log-monitor would use this config too.

React v16 warning

In react v16.12 has warning:
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. ...
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. ...
Please update the following components: Dock, JSONNestedNode, JSONTree, LogMonitor

Performance problem for very large states

Context:

I'm in the beginnings of writing a new app, the state/backend is mostly fleshed out, in the frontend I only have a single form input element styled with material design light for trying out state changes.

• Each keystroke I dispatch a state update since I hold customer data there.
• The state object is currently artifically big (includes a 36kb json) since I'm holding some mock data that won't be there when the app gets further developed.

I'm using the following packages:

    "redux-devtools": "^3.0.0-beta-3",
    "redux-devtools-dock-monitor": "^1.0.0-beta-3",
    "redux-devtools-log-monitor": "^1.0.0-beta-3",

Problem:

After only 30 or so characters the UI becomes super laggy, this is solved by committing the current state in the devtools log monitor. Obviously it happens right back after typing again. So it's clear the state is too big to be duplicated on every action (like the logger does)

Is there any workaround around this? Probably an automatic clear after a certain size would be nice, although ultimately using diffs between states changes and storing only that would be the way to go.

React peer dependency version inconsistency

This package's peer dependency with React is "^0.14.9 || ^15.3.0", but the dependency react-json-tree's peer dependency with React is "^15.0.0".

I have a React app that's still on 0.14.9, and I have a host of problems with this setup, including shrinkwrap will refuse to run because my React version doesn't meet react-json-tree's requirements.

I guess the answer here would be to remove ^0.14.9 as an option, so it's clear which version of React is needed.

Click area for arrows is too small

As described in reduxjs/redux-devtools#73, it's currently easy to miss the expanding arrow. It should have some larger paddings.

payload.error not displayed

redux-logger does display the action correct as you can see on this screenshot.

Invariant Violation

Unfortunately I get the following error after dispatching an action that did not manipulate the store at all and I could not find the reason what could have cause this error in general. Does anyone else have this error before as well and could give me a hint what's wrong here?

Thanks!

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {type}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `LogMonitorAction`.

Can you please move "styles" into the props

@gaearon You mentioned in another another issue that the reason you're using inline styles vs. CSS classes is because you think it's easy enough to clone the LogMonitor to make theming changes.

However, there are two big reasons why cloning the LogMonitor as a theming tool is a pain at the moment:

1. It forks the code. So no new updates to the main LogMonitor code base will not be pulled in anymore.
2. It's actually quite a lot of steps to clone the LogMonitor. It requires copying the code (for all the nested components), installing all the required required dependencies, rebuilding the app, etc...

It's a big effort when all you want to do is make the font-size 1px smaller.

Would you consider moving the "styles" into a prop instead so at least the inline styles can be overwritten?

Getting "Error selecting state." when using custom selector

When I try to use a custom state selector, I get "Error selecting state." printed under @@INIT action. It appears state is null during this action, because I can't even select a top level property, e.g. state => state.propA. Is this by design?

React-Native Transform Error - Preset "es2015-loose"

I have a new React native project. I am using [email protected], [email protected], [email protected], [email protected] and [email protected]. Everything compiled fine when calling react-native run-ios until I added this redux-devtools-log-monitor library. Now, I get the following error in Packager:

[12:48:31 PM] <START> transform
transforming [====================================    ] 89% 685/769 Error while persisting cache: TransformError: /<path>/node_modules/redux-devtools-log-monitor/lib/index.js: Couldn't find preset "es2015-loose" relative to directory "/<path>/node_modules/redux-devtools-log-monitor"

Any suggestions?

PS: <path> in the error above is obviously the full path to the project that I removed...

Breaks with babel 6

I get the following errors when trying to use this library with babel 6:

ERROR in ./~/react-pure-render/function.js
Module build failed: ReferenceError: [BABEL] /Users/dannya/Projects/Work/webcreator/node_modules/react-pure-render/function.js: Using removed Babel 5 option: /Users/dannya/Projects/Work/webcreator/node_modules/react-pure-render/.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

ERROR in ./~/redux-devtools-themes/lib/index.js
Module build failed: ReferenceError: [BABEL] /Users/dannya/Projects/Work/webcreator/node_modules/redux-devtools-themes/lib/index.js: Using removed Babel 5 option: /Users/dannya/Projects/Work/webcreator/node_modules/redux-devtools-themes/.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

ERROR in ./~/react-json-tree/lib/index.js
Module build failed: ReferenceError: Unknown plugin "transform-decorators-legacy" specified in "/Users/dannya/Projects/Work/webcreator/node_modules/react-json-tree/.babelrc" at 0, attempted to resolve relative to "/Users/dannya/Projects/Work/webcreator/node_modules/react-json-tree"

LogMonitorEntry does not show 'state' and 'action' anymore but only 'root'

With the upgrade from v1.0.2 to v1.0.3 the react-json-tree module was changed from ^v0.3.0 to ^v0.5.1.
But v0.5.6 somehow causes a problem, as the keyName property somehow does no longer work and the state tree does no longer get rendered as expected.

@@redux-devtools-log-monitor/UPDATE_SCROLL_TOP

devTool endlessly dispath action of type: @@redux-devtools-log-monitor/UPDATE_SCROLL_TOP

Webpack with Babel 6 causes errors because of .babelrc files

Using webpack (with babel-loader) causes errors like "Using removed Babel 5 option". Removing or renaming all (5) .babelrc files in the node_modules/redux-devtools-log-monitor tree solves this problem.

expand action payload by default

When using flux standard actions I have to click the payload property to see the contents of the action. I guess I could stop using FSA, but another option could be for LogMonitor to expand the payload by default.

Make density configurable

Like Gmail, we should offer a density=(comfortable|cozy|compact) prop that configures margins and paddings. This would solve reduxjs/redux-devtools#153.

Action & State always expanded

We are implementing the fantastic Redux-Dev-Tools in our app. It promises to help us understand things much better.

I think we have this set up correctly to collapse the action and state in the LogMonitor. Our state tree is rather large with 158 keys...having it expanded and toggling dialogs and having request/success httpPuts, etc. is makes having the state expanded hard to deal with.

Here is our implementation of DockMonitor and LogMonitor:

// Node modules
import DockMonitor from 'redux-devtools-dock-monitor';
import LogMonitor from 'redux-devtools-log-monitor';
import React from 'react';
import { createDevTools } from 'redux-devtools';


// Component definition
export default createDevTools(
  <DockMonitor
    changePositionKey="ctrl-q"
    defaultIsVisible={false}
    defaultPosition="right"
    defaultSize={0.3}
    fluid
    toggleVisibilityKey="ctrl-h"
  >
    <LogMonitor
      expandActionRoot={false}
      expandStateRoot={false}
      theme="monokai"
    />
  </DockMonitor>
);

We are using these package versions for this fun stuff:

"redux-devtools": "3.x",
"redux-devtools-dock-monitor": "1.x",
"redux-devtools-log-monitor": "1.x"

Thanks for any pointers!

Server Side Rendering - React Invalid Checksum

Hi, so the server renders cursor:text;, but the client renders cursor:pointer;. I think I've traced the responsible line to this location

I went in and manually poked around to try and test different solutions, it looks like the if-enabled conditional is the section that causes the difference between the server and the client.

In addition, it seems that the server rendered markup will be missing any initial app actions, for example @@Router/LOCATION_CHANGE and all of its contents, whereas the client-side render will have this immediately, resulting in another invalid checksum. Do you happen to know why this is?

Warning: Expected `onClick` listener to be a function, instead got `false`.

In using the <LogMonitor /> component, I am getting warnings about a prop used in the module.

Warning: Expected `onClick` listener to be a function, instead got `false`.

If you used to conditionally omit it with onClick={condition && value}, pass onClick={condition ? value : undefined} instead.
    in span (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONObjectNode)
    in JSONObjectNode (created by JSONNode)
    in JSONNode (created by JSONNestedNode)
    in ul (created by JSONNestedNode)
    in li (created by JSONNestedNode)
    in JSONNestedNode (created by JSONObjectNode)
    in JSONObjectNode (created by JSONNode)
    in JSONNode (created by JSONTree)
    in ul (created by JSONTree)
    in JSONTree (created by LogMonitorEntry)
    in div (created by LogMonitorEntry)
    in div (created by LogMonitorEntry)
    in LogMonitorEntry (created by LogMonitorEntryList)
    in div (created by LogMonitorEntryList)
    in LogMonitorEntryList (created by LogMonitor)
    in div (created by LogMonitor)
    in div (created by LogMonitor)
    in LogMonitor (at DevTools.jsx:12)
    in div (created by Dock)
    in div (created by Dock)
    in div (created by Dock)
    in Dock (created by DockMonitor)
    in DockMonitor (created by Connect(DockMonitor))
    in Connect(DockMonitor) (created by DevTools)
    in DevTools (at App.dev.jsx:37)
    in div (at App.dev.jsx:27)
    in Provider (at App.dev.jsx:26)
    in App (at index.js:28)
    in ErrorBoundary (at index.js:27)
    in MuiThemeProvider (at index.js:26)
    in Router (created by HashRouter)
    in HashRouter (at index.js:25)

Here is my usage:

import React from 'react';
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

export default createDevTools(
  <DockMonitor
    changePositionKey="ctrl-w"
    defaultIsVisible={false}
    toggleVisibilityKey="ctrl-h"
  >
    <LogMonitor />
  </DockMonitor>
);

my module versions:

    "react": "^16.3.0",
    "redux-devtools": "^3.4.0",
    "redux-devtools-dock-monitor": "^1.1.3",
    "redux-devtools-log-monitor": "^1.3.0",

How do I fix this behavior? It is making the console very noisy

Some objects cannot be displayed on log monitor.

Hi,

Some custom types cannot be serialised and displayed on log monitor.

The example uses a library that creates custom types origamitower/folktale and if those types are used on redux, their content are not shown on log monitor.

There is a PR available that fixes this issue on react-json-tree. alexkuz/react-json-tree#PR_85

Thank you.

Action value overflow issue

Hi! I noticed a small bug when working on an API that returns a huge hash URL. The monitor overflows horizontally with scroll (expected behavior I presume, but maybe wrapping would be better? It would in this instance but maybe not always), but the background color does not grow with it.

I'd like to cook up a PR for this, and if all goes well, for #1 later. Let me know what you think about overflow vs wrapping!

What's going on with this timeline?

I notice a big performance hit when I have DevTools enabled w/ LogMonitor.

I'm no good at understanding these Chrome timelines, but what's going on here (this is from the Heavy bottom up view, where this anonymous function is at the top)?

Using 1.0.4

Upgrade react-json-tree

In particular I'm interested in alexkuz/react-json-tree#38 (released as 0.6.3)

Warning: Accessing PropTypes via the main React package is deprecated.

Since [email protected] a warning is printed:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Cannot Copy/Paste

Hi,

I cannot highlight to copy/paste the data in the devtools default UI. It won't highlight the text on using chrome 47. This is intentional due to: : alexkuz/react-json-tree#10

Another very useful feature would be to serialize either the action or the state to JSON and then to the clipboard. A simple export button would be sufficient and an easy, while getting diffs or a whole state would be even better.

Reporting in the right project from: reduxjs/redux-devtools#200