“This is the 27th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Before this, once our small program error, all rely on the user screenshots feedback, the developer then a little bit to reproduce after thinking, is there something to record the user's behavior, if the small program error will automatically upload the user's operation record to the server and notify the developer to deal with it? Later I know that this is called front-end monitoring. Of course, this article is relatively simple, because I will not be difficult and I have not participated in the development of the real project.Copy the code

What is the function of this small program monitor implemented?

1) Record the time when users enter and exit the page; 2) monitor all click events; 3) record the approximate operation track of users. 4) The failure of cloud function call is automatically reported to the database to remind developers to deal with it.Copy the code

To realize the record of users in and out of the page

We all know that applets have several life cycle functions. Among them, I have chosen onShow,onHide and Unload. The clumsy approach would have been to log the page display and hide/unload times directly in the lifecycle functions of each page, but this would have been too repetitive, so we could have used another layer of lifecycle functions (this is called decorator in Javascript design patterns).Copy the code

The new question is, how do you put another layer on everything?

Let’s start with a page index.js file

By passing in an object to the Page method that contains all the events (clicks, slides, CSS3 animations, and so on), the life cycle.

So we can define a method to replace the Page method, in this method to get the object passed in to modify, remember to execute the original Page(Obj). Look at the code structure

Function 1 is called, reads the cache, appends the current page to the array element if data exists, and strips out the first element if the array length is greater than 10, keeping the array length at 11.

Is to use the timer, because in the test if there is no added timer sometimes read no more than the latest data, get the assignment on the old data is modified, and then reset the cache (because when onshow function performs the onhide function on a page may not complete, and in this function modifies the cache, So the onshow function is not the latest cache, resulting in information loss.

Look at the cache result:

Implement listening for all click events

1) The simplest way is to implement it with publish and subscribe mode, but it is too troublesome. 2) Set another layer for all events in the page, event trigger will have a parameter E, check e.type.Copy the code

Look at the code

Finally, the call to the original function is returned. Next, look at the replaceOld function, which implements a wrapper around the original event (decorator mode).

Execute the replace method on each function pair within the page.

What’s the use?

We can see that this function wraps the original method once, depending on the function replacement passed in.

This function finally returns the execution of the original function, so all wrapped up is the function’s internal determination of whether or not it is a click event, if it is, save the data.

Look at the cache result:

Cloud function call failure is automatically reported to the database to remind developers.

DefineProperty () is used to hijack a call to a cloud function and then return the call to a cloud function. However, there are two ways to call a cloud function: 1) there is a callback passed in and the result is retrieved from the callback. 2) No callback function passed in is await the result of the call, and we need to capture the error of the cloud function call, so we get the result directly at the time of hijacking and return a Promise.Copy the code

Automatic notification to developers is actually very simple to call the template message provided by wechat in the cloud function.

Look at the cache results

Maybe the structure is a little messy, because I’m writing it for the first time and I haven’t actually used it yet.

Reference data: https://juejin.cn/post/7023231977092284424Copy the code