We’ve been working hard recently to add a new big feature to RootCause: video recording of user sessions. With this feature you can record a video of the user activity and watch it later to see what triggered a bug. This feature can be enabled using the recordSessionVideo config of the logger instance:

How does it work?

With this feature enabled, the RootCause logger will monitor all DOM changes using the mutation observer API and stream those changes to the server in real-time, using a WebSocket connection. Since the collected DOM changes are sent to the server immediately, the memory usage of your app will not increase. The mutation observer API is also known as a lightweight alternative compared to the DOM mutations events API meaning there’s no additional overhead.

Later during playback, the recorded DOM changes are applied to an empty iframe, effectively re-creating the same state of the DOM. The only difference is that <script> tags are not created and replaced with empty <no-script> placeholders. This is to avoid the unnecessary JavaScript exceptions.

All this creates the impression of a normal “video” even though technically it is not and the browser is still used as a rendering engine.

Watching the video

After a video has been recorded, you can watch it in the error details page.

Using the toolbar buttons you can control playback (1x to 4x speed), open in new window, and show the video in full screen.

Watch Video vs. Live Replay

Video recording is not a replacement for the Live Replay feature. We see it as a complementing feature, for situations when using Live Replay is not feasible. For example, when the application data is highly dynamic leading to significant UI changes on the next login (we are shortly introducing network traffic mocking to address this). Another case is when the application requires authentication and it’s not possible to implement an impersonated login.

In these cases, a simple video recording is very handy since it captures a visual representation of the data that the user saw during the session. It also works fine for any page, even when the page requires authentication. The only requirement is to have a RootCause logger script on the page.

For productivity however, using a video recording to solve a bug is probably slower than using Live Replay. Notably it requires you to carefully look at the video and then manually repeat all the user actions that caused the exception. For Live Replay, this is all automated and you jump straight into context. Considering that not every bug is easily reproducible (e.g. a hidden race condition that requires certain time to pass between user actions), debugging using only a video recording can be time consuming.

Whether to use Live Replay or the video recording is up to you and your requirements. For the most cases it’s probably preferred to use Live Replay and when not feasible, use video recording as a fallback.

Conclusion

With this new feature, RootCause becomes a complete set of tools for improving quality of complex web applications. Using the Live Replay feature, you can automate a lot of the debugging process, reducing the overall time required to find the root cause of application bugs. And for complex cases it is still possible to understand the session flow that caused an error, by using the video recording.

As always we are always here to listen to your feedback. Bug reports and feature requests are welcome: http://therootcause.io/forum/

Happy debugging! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">