Redux Logging in Production with LogRocket

Setting up LogRocket

Setting up LogRocket is easy, and only requires adding a few lines of code to your app:

1. Install with npm: npm i --save logrocket.
2. Create a free account at http://ift.tt/2ptXPpm, and take note of your application id.
3. Initialize LogRocket in your app:

   import LogRocket from 'logrocket';
   // Initialize LogRocket with your app ID
   LogRocket.init(<your_application_id>);
   
   

4. Add the Redux middleware.

   import { applyMiddleware, createStore } from 'redux';
   const store = createStore(
     reducer, // your app reducer
     applyMiddleware(middlewares, LogRocket.reduxMiddleware()),
   );
   
   

That’s it for the basic setup- this is all you need to get started with LogRocket!

LogRocket also has plugins for alternate Flux implementations like ngrx and vuex, which you can read about here.

Replaying User Sessions

Replaying a session in LogRocket is like seeing it happen in your own browser. You can inspect Redux actions with the full action payload as well as the previous and next states.

LogRocket captures both network requests and responses and lets you dig in to specific requests and see the headers and body. The waterfall chart shows timings, making it easy to see which requests were slow, or if a potential race condition occurred.

Sometimes Redux logs alone aren’t enough to understand a bug, especially when dealing with user-reported issues. LogRocket’s video replay helps here by letting you see exactly what a user saw in your app.

Since this video is actually a reconstruction of the DOM (and not a real video) you can inspect HTML/CSS to understand visual bugs, or play at 2x speed to gain a quick understanding of what a user did in the app when handling support issues.

Integrating Redux Logging into Your Workflow

Being able to replay user sessions and see Redux logs is helpful across the development workflow.

Continue reading %Redux Logging in Production with LogRocket%

by Ben Edelstein via SitePoint