Build a front-end monitoring system step by step: How to report web page screenshots?

Abstract: Through recording screen or screenshot, quickly reproduce the BUG scene.

• Author: One step at a time
• 译 文 : Build front-end monitoring system (optional) Js screenshots report

FundebugReproduced with authorization, copyright belongs to the original author.

PS: This paper is aboutFundebugThere are some inaccuracies in the recording function, such as the recording is not achieved through screenshots, the BUG of the recording plug-in has been fixed, the recording is not only supported by Chrome, the recording data is not large, and the performance of the recording has also been optimized.

** Background: ** There are many monitoring systems on the market, most of which are charged. For small front-end projects, it is bound to be a pain point. The other main reason is that although the features are universal, they may not be able to meet our own needs, so it might be a good idea for us to be self-sufficient.

This is the second chapter to build a front-end monitoring system, mainly introduces how to statistics JS error, follow me step by step to do, you can also build a belongs to their own front-end monitoring system.

Currently running online Demo:Front-end monitoring system

The code and explanation are in this article:Monitoring system introduction and code

The user is a black box to the front-end programmer. If a user reports an error, the front-end programmer is blindsided, because many errors cannot be repeated. I’ve asked a lot of front-end engineers, and the answer is, if you can’t reproduce a Bug, how do I fix it? So is there a way to overcome the barrier between the user and the front-end programmer, so that the user is not a black box to us, but transparent. What the user’s page looks like, what they have done, what happened wrong, we Can clearly know, then, when there is a problem reported, I will be very confident to say: I Can Fix it!

Recently I tried Fundebug and the first thing I saw on the front page was black tech! Supports screen recording. I was shocked, JS do front-end monitoring, incredibly can record screen? What the hell are you trying to do? So, sign up for a trial run.

After a variety of configurations, test release, found no effect, so ask customer service. The recording function is buggy, so it is disabled by default. Set silentVideo to false. (PS: Fundebug recording BUG has been fixed)

Sure enough, after careful guidance of customer service, finally successful. Figure 1 shows chrome on the PC, which can record on the screen normally. Figure 2 shows the webView browser of mobile app. Click the first time to display the grey screen, and click the second time to display the screen recording of computer version. After testing, all browsers except Chrome do not support it. This reminds me of a library for JS screenshots called JSCapture, which is also chrome only. I’m guessing that’s what Fundebug uses. – Fundebug also indicates that it’s not a real video, that it took a few more frames, then switched the sequence and looked like a video. (PS: Fundebug recording function is not achieved through screenshots)

Although it is black technology, but also faced with a few relatively big problems:

One, because chrome is the only browser supported, and Chrome is the most compatible browser, many of the problems will not happen on this browser, so this hack technology will have to wait for more browsers to support it before it really works. Alas, compatibility – the fate of front-end programmers. (PS: Fundebug is not only available in Chrome)

Second, even if the screen recording is solved and a fake video with at least a few frames is uploaded, this traffic size is a serious problem. Although Fundebug says that after special processing and compression, a video is only tens of KB, I always feel not very reliable, and it is difficult to achieve (to be verified). (PS: Fundebug screen recording data is optimized and compressed, so it is not large)

Iii. My own mobile phone is iphone6 Plus. When Fundebug captures the screen on my mobile phone, the phone will be stuck for a long time. I tried to take screenshots with js on iphone6 before, but there was also a lag phenomenon, which was very obvious on wechat browser, and even caused wechat to refresh the page again. Fortunately, iphone6 and up, the efficiency of screen capture is very high, there will be no lag. (PS: Fundebug recording performance has been continuously optimized)

So, Fundebug’s hack technology won’t be popular, but we can think of a different way to record user behavior.

Before, I considered a demand, record the user’s each behavior, access to the page screenshots, click on the button local screenshots, so, when errors occur, you can clearly know the user what he did on the page, but due to upload screenshots requires traffic is really too big, so the idea had to give up. Today, I saw Fundebug’s hack technology, but it gave me some inspiration. I will improve the user behavior tracking function on the page according to the three difficulties mentioned above.

User behavior tracking

First, upload screenshots, how to do the traffic consumption is too large, the picture resources for extreme compression.

After taking screenshots, the data needed to upload is very large, because it is picture data, at most several hundred Kb, at least a hundred Kb, such a large flow, on the user side, the loss is really too large.

First, several tests are carried out on JS screenshots, as shown in the figure below:

Parameters for the previous screenshot are as follows:

To sum up, the first method of screenshot has a high compression rate. Although the screenshot is not very clear, it can also be seen what the online user page looks like.

Moreover, it also solves the drawback of consuming too much performance in low-end screenshots. Twenty Kb of traffic is also the size we can fully accept.

Thus, this approach can fully meet our needs for tracking user behavior.

Second, if the number of users is very large, users frequently upload, is also a big problem

So, my advice is to spread the traffic and have each user contribute screenshots at least once:

① Each user uploads a screenshot of a page and a screenshot of a click area at a random time on a random page, and uploads only once, and only contributes a screenshot of a page in a user’s life cycle

② When a certain type of error occurs to each user, only one screenshot can be uploaded. If there are multiple types of error, multiple screenshots can be uploaded. In this way, users can save a lot of upload times.

③ The user’s screenshot data is very large, which requires a lot of hard disk space for a long time. Therefore, my suggestion is that each process page only needs to correspond to one (click the screenshot in the area, the same thing). There is only one error page for each type of user (easy to locate the cause of the error)

How do I take screenshots and reduce the size of uploaded resources

// js process screenshots
this.screenShot = function(cntElem, callback) {
    var shareContent = cntElem; // The wrapped (native) DOM object that needs a screenshot
    var width = shareContent.offsetWidth; // Get the DOM width
    var height = shareContent.offsetHeight; // Get the DOM height
    var canvas = document.createElement("canvas"); // Create a canvas node
    var scale = 0.6; // Define arbitrary magnification to support decimals
    canvas.style.display = "none";
    canvas.width = width * scale; // Define canvas width * scale
    canvas.height = height * scale; // Define canvas height * scale
    canvas.getContext("2d").scale(scale, scale); // Get context, set scale
    var opts = {
        scale: scale, // Add the scale parameter
        canvas: canvas, // Custom canvas
        logging: false.// Log switch, easy to view html2Canvas internal execution process
        width: width, // the original dom width
        height: height,
        useCORS: true [Major] Enable cross-domain configuration
    };
    html2canvas(cntElem, opts).then(function(canvas) {
        var dataURL = canvas.toDataURL();
        var tempCompress = dataURL.replace("data:image/png; base64,"."");
        var compressedDataURL = Base64String.compress(tempCompress);
        callback(compressedDataURL);
    });
};
Copy the code

To do this, you must rely on the help of two JS libraries.

Html2Canvas performs HTML page screenshots, while LZ-String performs compression of string length, as shown in the code above.

Since the user behavior tracking function can be optionally turned on by the user, it is recommended that these two JS library files be introduced by a client to reduce the size of the probe code. In this case, we need to define a widget to load THE JS file

// A widget to load js files
this.loadJs = function(url, callback) {
    var script = document.createElement("script");
    script.async = 1;
    script.src = url;
    script.onload = callback;
    var dom = document.getElementsByTagName("script") [0];
    dom.parentNode.insertBefore(script, dom);
    return dom;
};
Copy the code

// After loading the html2Canvas library file, notify the global variable, same as lZ-string
utils.loadJs("//html2canvas.hertzen.com/dist/html2canvas.min.js".function() {
    html2CanvasLoaded = true;
});
Copy the code

OK, the data is ready, all that’s left is to store the data and associate it with user behavior and JS errors. Complete the user behavior tracking function.

PS: This paper is aboutFundebugThere are some inaccuracies in the recording function, such as the recording is not achieved through screenshots, the BUG of the recording plug-in has been fixed, the recording is not only supported by Chrome, the recording data is not large, and the performance of the recording has also been optimized.

About Fundebug

Fundebug focuses on real-time BUG monitoring for JavaScript, wechat applets, wechat games, Alipay applets, React Native, Node.js and Java online applications. Since its official launch on November 11, 2016, Fundebug has handled over 1 billion error events in total, and paid customers include Sunshine Insurance, Walnut Programming, Lychee FM, Zhangmen 1-to-1, Weimai, Qingtuanshe and many other brand enterprises. Welcome to try it for free!