Session replay is the flexibility to assessment precisely what occurs in another person’s browser, however at a later time. And no, I’m not speaking about recorded display screen seize, that wouldn’t be sufficient as a result of that might not allow you to mess around with the small print, examine the dev instruments, and see what JavaScript errors popped up that have been invisible to the consumer.
I’m speaking a couple of direct replay of the actual DOM being modified second by second.
How cool is that?
There are just a few instruments on the market that let you do this already:
- SmartLook for instance, permits you to seize classes for internet and cell.
- Dyantrace additionally has an built-in session monitoring software.
And there are a lot of others, however the one I need to discuss right now is OpenReplay. Why that one specifically? As a result of it’s the one one I’ve discovered that gives a totally working open-source model you could obtain and set up for your self.
They do have a SaaS model as effectively, which is totally free so long as you retain beneath 1k classes recorded per thirty days. You don’t want a bank card to enroll and you will get began with only a few clicks.
However the truth that you possibly can set up your self the software program without spending a dime means you will have full management over the information being saved out of your customers. In any case, you’re capturing their enter and whilst you do have the flexibility to sanitize that info to keep away from capturing undesirable knowledge, you’ll nonetheless have the understanding of what’s being accomplished with the remainder of the captured info. That, contemplating right now’s safety issues, is priceless.
So what do you get whenever you enroll?
What’s so nice about OpenReplay?
When you enroll, you’ll be given a JavaScript snippet, which you want to add to your code. It really works very like Google Analytic’s snippet, you copy & paste it there, and it simply works.
In fact, you will have a full SDK so as to add customized occasions, points and lots of different choices. However simply with the snippet you’re already able to get began.
The next picture reveals the principle UI of a recording being reproduced:
Discover how on this screenshot, you possibly can see the app on high, and the Community tab beneath it. You’re witnessing a recording of me attempting out my check app. The Community tab there may be utterly dynamic and is up to date in real-time with the information recorded as a part of the session.
Now, here’s a recording of me taking part in one in every of my very own classes:
Discover how just a few seconds after I hit click on to play, the black mouse pointer begins transferring (that’s the unique mouse transferring as I moved it once I was recording the session). When that occurs a number of issues begin transferring:
- You’ll be able to see on the principle display screen how the mouse begins transferring, and my enter begins magically showing on every area.
- On the suitable facet, you possibly can see the consumer occasions (my clicks and inputs). These are being highlighted as they occur. You’ll be able to click on by way of them and bounce to the timestamp of every occasion.
- Proper beneath the principle display screen, you possibly can see a timeline, like that of a video. You’ll be able to click on it to leap from one place to the opposite of the session. The
!there are points discovered in the course of the recording. Thoughts you, they’re not points WITH the session, they’re points in my app (sick!)
Since my app is a quite simple type, the one points OpenReplay is detecting are Lifeless Clicks, that are occasions the consumer has clicked someplace on my web page and nothing occurred. This isn’t an error per se, nevertheless it’s indicative that the consumer is probably attempting to do one thing that may’t be accomplished (like clicking on a useless hyperlink as an illustration).
Now, for my assessments I’m utilizing this basic app, which solely supplies a easy type inbuilt React. For testing functions, I’ve added a random throw assertion when the shape is submitted. After recording a brand new session and attempting to ship the shape 4 occasions, you possibly can see these unheled exceptions proven on the replay:
The timeline reveals the errors on each one in every of my clicks on the “Ship” button. You’ll be able to even see that on the time of the screenshot I had already hit it 3 occasions, and there was nonetheless yet another to return nevertheless it’s nonetheless not sown on the decrease part as a result of it hasn’t occurred.
If I have been to click on on these errors listed there, I might get the small print of the exception as you possibly can see beneath:
You get the stacktrace and the small print of the error. In the event you have been to add the mapping for the generated code, you’ll additionally get line-level particulars about the issue.
You’ll be able to’t actually get that utilizing display screen seize.
What number of customers do you will have?
It’s not like that’s an issue, however the thought of storing and going by way of numerous replay classes could be a scary thought.
Fortunate for us, the workforce at OpenReplay thought of that and created a really highly effective search characteristic, which permits customers to create advanced searches by way of level&click on mechanics.
Take a look at the next search I configured:
Seen how I’m searching for classes during which I entered the phrase “remark” adopted by a click on on the “Ship” button. You’ll be able to add AND and OR situations as effectively to make it much more fascinating.
In the event you occur to know there’s a specific set of actions that trigger an error or sudden conduct, you possibly can straight seek for it right here, and solely undergo classes that comply with the sample.
