Time-Travel Debugging with Redux and Profiler

Redux refers to the process of logging actions and state during an app’s execution. Since it represents the entire state of an application at a given moment, it is often used in web development for time-travel debugging and to view Redux actions.

But the benefit of Redux logs are even more powerful when combined with the data from the rest of your software. OpenReplay allows you to replay sessions with issues as if they were happening on your own browser. Every recording captures your Redux states but also your console logs, network requests, backend logs, the DOM video and more.

What this means is that you can easily replay, pause, and rewind sessions to see each Redux state in action, alongside the data from across your stack, making every issue easy to understand.

Replaying Redux Logs

OpenReplay stores all the Redux logs for every user session so that you can easily time-travel to a given moment to analyze it.

Redux data is collected and stored for every user session, without compromising application performance. As in the above example, you can see each Redux Action and its corresponding state appear as the page loads, in sync with the actions of the user.

By associating Redux logs with the session recording, you get a clear picture of how your users experience these issues.

When an issue occurs, you can then pause, rewind or fast forward to any given action, allowing you to focus in on that precise moment. By selecting a Redux action, you can dig deeper into the state tree to find errors or issues. Alongside the data from the rest of your stack, inspecting the Redux state in OpenReplay will make it easy to debug user-reported issues.

Profiler

Another feature that we’ve recently added is the Profiler.

Profiling is the process of measuring an application or system by running an analysis tool called a Profiler. Profiling tools can focus on many aspects: functions call times and count, memory usage, CPU load, and resource usage.

Here, we have a Profiler set up on our page to analyze how long it takes our session player to load and process the video. Since this is one of our most significant features, it is extremely important for it to be snappy and without lag. Above, you can see our Profiler logs every time the player starts. Here, we can see the exact amount of time it took to respond, and act accordingly if there is an obvious issue. By looking at the video itself, we can see how that looked like for our user.

Conclusion

To resume, OpenReplay makes it easier to debug your application, allowing you to go back in time, so to speak, to any given moment an issue occurred. There, you can inspect your Redux States as well as the response from your Profiler, alongside the data from the rest of your software. That way, you don’t have to waste time guessing why a bug is happening, you simply need to press play.