Using store-devtools in "logOnly" mode in production

[akrueger]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[ X ] Documentation issue or request

My goal is to send error reports with a redux state history to my server as part of our logging service in production. I have no problem sending the current state at the time of the error, but what I'd really like is something that looks like the state.json object that the redux-devtools-extension allows you to download. With an object like that with a max age (say 5 to keep performance in a good spot), I could take the data from my server log and upload the state into the redux-devtools-extension; then replay the state back to see how users have managed to get into their error state.

I don't need to use any of the features that can manipulate the state--JUMP, SKIP, PAUSE, COMMIT, etc--I'd want to avoid that completely in production. I have read about the extension's production modes that have logOnly as well as this article.

I am not sure how this is best achieved in my Angular ngRx app. Is there a way for me to achieve this using store-devtools. Should I be using some other type of meta-reducer similar to the enhancer?

I saw the options for sanitizing actions and serializing state, but I'm more interested in a setting for logOnly and accessing the data in my error handling that could be read back into redux-devtools-extension for error analysis from our logs.

ngrx/store-devtools#53 (comment) addresses use in production and seems to indicate that there is no logOnly option, but I didn't want to give up just on that assumption:

The devtools allow external users to look at and potentially manipulate the state of your application.

Thanks!

[akrueger]

Thanks a lot!

As a follow-up to this:

Is it possible to access the liftedState of @ngrx/store-devtools from the client application? This lifted state seems akin to the state.json object that is imported/exported by Redux Dev Tools. Since I want to log that at the point of an error, I'm trying to figure out the best way of accessing that at runtime when there is an error.

[brandonroberts]

@akrueger you can inject the StoreDevtools to access the lifedState property that is an Observable of the current lifted state.

[akrueger]

@brandonroberts Thanks, worked perfectly!

[akrueger]

I'm having some trouble figuring out the exact effects of including logOnly: true.

• What specifically is logOnly doing? I had assumed it was setting all features to false, but it doesn't appear to be true
• Even when I set all features to false, I still seem to be able to jump, skip, commit, etc

Below are my results of the Redux DevTools extension in development environment, production environment with logOnly, and production with logOnly and all features set to false:

Development environment:

Production with logOnly:

Production with logOnly and all features set to false:

Thanks!

[brandonroberts]

logOnly set the features to match these settings https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/logOnly.js#L8

The features property is there only if you want to provide your own settings. Setting features to false enables all extension settings as documented here https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#features

[akrueger]

Got it. Thanks!

Is it fair to assume this statement is also true about ngRx's logOnly mode?

The difference is that it will not include the instrumentation enhancer, so will not affect the performance and will not store anything if not required. It’s minimalistic and restricted to logging, exporting and generating tests only. Moreover, it auto pauses when the extension’s window is not opened, and so has zero impact on your app when not in use. The module adds just few lines of code and uses extension’s API directly to send data.

https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f

Just making sure I would want to include logOnly along with specific features set to false in production. If it's doing more than just turning off a few features, I'd include them both if I was trying to be most restrictive/performant.

When I pull down the example app and include the following config:

StoreDevtoolsModule.instrument({
      name: 'NgRx Book Store DevTools',
      logOnly: true,
      features: {
        pause: false, // start/pause recording of dispatched actions
        lock: false, // lock/unlock dispatching actions and side effects
        persist: false, // persist states on page reloading
        export: false, // export history of actions in a file
        import: false, // import history of actions from a file
        jump: false, // jump back and forth (time travelling)
        skip: false, // skip (cancel) actions
        reorder: false, // drag and drop actions in the history list
        dispatch: false, // dispatch custom actions or action creators
        test: true // generate tests for the selected actions
      },
})

1. I seem to be able to use jump and skip when they are set to false
2. Test generation tab doesn't show up even when set to true

[yfain]

I use this:

StoreDevtoolsModule.instrument({
  logOnly: environment.production
})

Supposedly, if the logOnly flag is true, your app will connect to the Redux DevTools extension in a log only mode, it'll have very little overhead as it shouldn't store the state data, but only log the action names that are happening during the runtime.

But in my experiments, I still see the state data in the ngrx DevTools panel, so what're the benefits of using logOnly:true?

[mtj8033]

Agreed this doesn't appear to be working properly, I can still execute all other actions atm