How user session recording works
The monitoring.js library is a core technology for recording user sessions. This document provides a general technology overview.
Recording and playback of user sessions are becoming a necessity for fixing application errors. These recordings allow developers to see individual steps of reproducing the error quickly.
Kuoll combines automated error detection, user screen recording and continuous record of debugging information. That allows to fully automate the error resolution process from detecting the error in production web application to reproducing the error by a developer. Using Kuoll, a developer doesn't need to reproduce the error manually — the recording contains both the input data and the result of code execution on the webpage, including user events, contents of network requests and responses, and even the authentic DOM at every moment in the user session.
All this information is collected and made available thanks to Kuoll script, which is embedded in the web application pages. A technical description of the way this script works is below.
Key principle: approach a web page as a black box
The idea is that it does not matter what happens inside the black box, but what happens at the boundary, at the entrances and exits. Kuoll records the interaction of the web page with the user, the server, and even itself.
Kuoll intercepts and saves the following bits of data:
- User-generated and browser events — mouse movement and clicks, touch-events, keystrokes, window resizing and others.
- DOM hierarchy and its mutations. That is the code of the page, which the browser displays to the user.
- Network XHR requests and responses along with content and headers.
- Signals, which the page sends to itself:
setTimeout,setInterval. - Signals, which the page (page frame) sends and receives from other frames.
Window.postMessage.
Further, Kuoll combines these pieces of information into chains. For example, Kuoll would link a network request and the window.event, which initiated that request. When the server returns a response, Kuoll links the request XMLHttpRequest and server success response callback. In this way, Kuoll builds a chain of user actions, query - answer. That is useful to the developer investigating why the web page behaves the way it does.
Outstanding performance
At this point, you may be wondering: how much does all this information overload the network. Not at all. Kuoll transmits collected data only if it catches a JavaScript Error, or detects a 4xx or 5xx server response. Kuoll sends a request to the server about the problem and then decides whether to send the information. Before transmission, the data is stored in IndexedDB. The length of the recording is 3 minutes preceding the error.
The above implementation allows Kuoll to consume zero processor time when the web page is idle, zero RAM for storing the data, and minimal network resources. Kuoll works perfectly even on mobile devices with modern web browsers.
In the case when IndexedDB is not supported by the browser, Kuoll does not initiate recording at all.
To start recording
When Kuoll script initiates, it saves original DOM in its entirety and adds listeners to the interaction points described above.
After adding the script to the page, just call up Kuoll (“startRecord”, {api_key: …}).
We invite you to install Kuoll and experience its speed, a high value of the collected information, and the keen prioritization of errors, based on their effects on user behavior. Immediately after each new release, friendly Slack Bugbot would report only those new errors, which exceed our threshold of negative impact on users.