I’m talking about a direct replay of the real DOM being changed second by second.
How cool is that?
There are a few tools out there that allow you to do that already:
- SmartLook for example, allows you to capture sessions for web and mobile.
- Dyantrace also has an integrated session monitoring tool.
And there are many others, but the one I want to talk about today is OpenReplay. Why that one in particular? Because it’s the only one I’ve found that provides a fully working open-source version that you can download and install for yourself.
They do have a SaaS version as well, which is completely free as long as you keep under 1k sessions recorded per month. You don’t need a credit card to sign up and you can get started with just a few clicks.
But the fact that you can install yourself the software for free means you have complete control over the data being saved from your users. After all, you’re capturing their input and while you do have the ability to sanitize that information to avoid capturing unwanted data, you’ll still have the certainty of what is being done with the rest of the captured information. That, considering today’s security concerns, is priceless.
So what do you get when you sign up?
What’s so great about OpenReplay?
Of course, you have a full SDK to add custom events, issues and many other options. But just with the snippet you’re already ready to get started.
The following image shows the main UI of a recording being reproduced:
Notice how in this screenshot, you can see the app on top, and the Network tab underneath it. You’re witnessing a recording of me trying out my test app. The Network tab there is completely dynamic and is updated in real-time with the data recorded as part of the session.
Now, here is a recording of me playing one of my own sessions:
Notice how a few seconds after I hit click to play, the black mouse pointer starts moving (that’s the original mouse moving as I moved it when I was recording the session). When that happens multiple things start moving:
- You can see on the main screen how the mouse starts moving, and my input starts magically appearing on each field.
- On the right side, you can see the user events (my clicks and inputs). Those are being highlighted as they happen. You can click through them and jump to the timestamp of each event.
- Right under the main screen, you can see a timeline, like that of a video. You can click it to jump from one place to the other of the session. The
!There are issues found during the recording. Mind you, they’re not issues with the session, they’re issues in my app (sick!)
Since my app is a very simple form, the only issues OpenReplay is detecting are Dead Clicks, which are times the user has clicked somewhere on my page and nothing happened. This is not an error per se, but it’s indicative that the user is perhaps trying to do something that can’t be done (like clicking on a dead link for instance).
Now, for my tests I’m using this basic app, which only provides a simple form built in React. For testing purposes, I’ve added a random
throw statement when the form is submitted. After recording a new session and trying to send the form 4 times, you can see those unheled exceptions shown on the replay:
The timeline shows the errors on every one of my clicks on the “Send” button. You can even see that at the time of the screenshot I had already hit it 3 times, and there was still one more to come but it’s still not sown on the lower section because it hasn’t happened.
If I were to click on those errors listed there, I would get the details of the exception as you can see below:
You get the stacktrace and the details of the error. If you were to upload the mapping for the generated code, you would also get line-level details about the problem.
You can’t really get that using screen capture.
How many users do you have?
It’s not like that’s a problem, but the idea of storing and going through countless replay sessions can be a scary thought.
Lucky for us, the team at OpenReplay thought about that and created a very powerful search feature, which allows users to create complex searches through point&click mechanics.
Look at the following search I configured:
Noticed how I’m looking for sessions in which I entered the word “comment” followed by a click on the “Send” button. You can add AND and OR conditions as well to make it even more interesting.
If you happen to know there is a particular set of actions that cause an error or unexpected behavior, you can directly search for it here, and only go through sessions that follow the pattern.