Mini Program Practice: Implementing a Simple Mini Program Monitoring Function

This article brings you a practical application of a small program and teaches you how to implement a simple small program monitoring function. I hope it will be helpful to you!

Before this, once our mini program reported an error, it all relied on user screenshot feedback, and the developer would reproduce it bit by bit

and think about it later. , is there something that can record the user's behavior? If the mini program reports an error, it will automatically upload the user's operation record to the server and notify the developer to handle it?

I later learned that this is called front-end monitoring.

Of course, this article talks about relatively simple ones, because I don’t know how to do it and I haven’t participated in the development of a real project yet. .

What are the functions of this small program monitoring?

1) Record the time when the user enters and exits the page
2) Monitors all click events
3) Record the approximate operation trajectory of the user.
4) Cloud function call failures are automatically reported to the database to remind developers to handle them.

Realize the recording of users entering and exiting the page

We all know that the mini program has several life cycle functions. Among them, I chose the three life cycles of onShow, onHide and unload. Record periodically.

The stupider way is to directly record the time when the page is displayed and hidden/unloaded in the life cycle function of each page, but this is too repetitive,

So we can give these few Then add another layer to each life cycle function (this is called the decorator pattern in Javascript design pattern)

A new question comes again, how to add another layer to all events?

Let’s first look at the index.js file of a page

By passing an object to the Page method, This object contains all events (click, slide, CSS3 animation, etc.) and life cycle.

So we can customize a method to replace the Page method. In this method, get the object passed in and modify it. Finally, remember to execute the original Page(Obj) again. Look at the code structure

#The code is actually very simple. Once the function is called, the cache is read. If the data exists, the information of the current page is appended to the array element. If the array length is greater than 10, remove the first element and keep the array length at 11.

The reason why a timer is used is because sometimes the latest data cannot be read if the timer is not added during the test. Get the old data, modify it, assign it, and finally reset the cache (because when the onshow function is executed, the onhide function of the previous page may not be completed, and this function will modify the cache, so the onshow function will get is not the latest cache, resulting in information loss.)

Look at the cache results:

Implement monitoring of all click events

1) The simplest way is to use the publish and subscribe model, but it is too troublesome.

2) Add another layer to all events in the page. When the event is triggered, there will be a parameter e, just judge e.type.

Look at the code

##Finally returns the call to the original function, Next, take a look at the replaceOld function. What it implements is to wrap the original event (decorator mode)

Execute replace for each function pair in the page this way.

what's the function?

We can see that this function wraps the original method. The specific method of packaging depends on the replacement function passed in.

This The function finally returns the execution of the original function, so the content of the package is the judgment of whether it is a click event in the function body. If yes, just save the data.

See cached results:

Cloud function call failures are automatically reported to the database to remind developers to handle them.

Use Object.defineProperty() to hijack the cloud function call, wrap one more layer and then return the cloud function call

But there is a point to note here, the cloud function call There are two ways,

1) There is a callback function passed in, and the result is obtained in the callback function.

2) If there is no callback function passed in, await is used to wait for the call result, and we need to capture the error of the cloud function call,

So we get the result directly during the hijacking and then return one Promise.

#Automatically notify developers and process it. It is actually very simple to call the template message provided by WeChat in the cloud function.

Look at the cached results

The structure may be a bit messy, after all, it is the first time I write it and it has not been applied in practice yet.

[Related learning recommendations: 小program development tutorial】

The above is the detailed content of Mini Program Practice: Implementing a Simple Mini Program Monitoring Function. For more information, please follow other related articles on the PHP Chinese website!