One of the greatest strengths of Redux is debuggability — by logging actions and state during an app’s execution, developers can easily understand code errors, race conditions, network errors and other sources of bugs. In local development it is standard practice to use tools like redux-logger or redux-devtools for time-travel debugging and viewing Redux actions. But the benefits of using Redux logs to easily fix bugs are most significant in production. To do this, some developers build home-grown solutions or leverage existing backend logging tools, but making this work is not trivial. Redux data must be collected and uploaded efficiently, without compromising application performance, and on the backend, this data (which is quite sizable) must be stored and made easily searchable for debugging issues. Enter LogRocket… LogRocket is the first production Redux logging tool for webapps. It has a highly-optimized JavaScript SDK + Redux middleware, and can easily scale to support apps with millions of users. In addition to recording Redux data, LogRocket also records network requests, console logs, JavaScript errors, and full DOM video. Having this context in addition to Redux logs is crucial when fixing bugs since it essentially has all of the information you’d find in the Chrome dev-tools when developing locally. In this post, I’ll take a quick look at setting up LogRocket in a production app. Then, I’ll discuss how to leverage Redux to maximize app debuggability. Setting up LogRocket Setting up LogRocket is easy, and only requires adding a few lines of code to your app: Install with NPM: npm i --save logrocket . Create a free account at https://app.logrocket.com, and take note of your application id. 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! Later, I’ll discuss customizing LogRocket by doing things like action blacklisting, data scrubbing, and video configuration. Viewing Logs from user sessions

A sample LogRocket session showing video, network requests, and Redux logs

LogRocket groups logs from each user session into a “session”, accessible with a unique URL. You can get a session link in your app by calling LogRocket.getSessionURL() with a callback like this: We made a custom demo for .

No really. Click here to check it out . Click here to see the full demo with network requests LogRocket.getSessionURL(url => { console.log(url) }); This will print a link into the JavaScript console for the current session when you run your app. Later, I’ll show how to integrate LogRocket into error tracking and support workflows, but for now, just clicking this link in the console will let you see the logs for your current session when you run your app.

The Redux log viewer shows all of the Redux actions that occurred in the app during this session. Clicking on a redux action lets you explore application state before and after the action to see the effect it had on your store. Sometimes Redux logs alone aren’t enough to understand a bug, especially when dealing with user-reported issues. LogRocket’s DOM 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.