How to view the stability guarantee of small programs from the perspective of a front-end programmer

When we talk about business stability, we usually mean what back-end engineers look at from an architectural perspective, such as current limiting and downgrading, traffic scheduling, business switching, capacity stress testing, etc., but monitoring is also the stability of the entire business. An indispensable part of the construction, such as the monitoring of business and front-end, to ensure that when problems occur, the root cause can be found as soon as possible. Today, we will take a look at how to monitor mini programs based on the scenario of mini programs.

The difference between mini programs and H5

Both mini programs and H5 are technical options in the mobile terminal scenario, so here is an introduction to the differences between mini programs and H5.

1. Differences in operating environment

The traditional H5 operating environment is a browser, including webview, in which the browser provides BOM objects such as window and document;

The logic layer and rendering layer of the applet are separated. The logic layer runs in JSCore and does not have a complete browser object, so it lacks related DOM API and BOM API.

2. Differences in development costs

The development of H5 involves the selection of development tools, front-end frameworks, module management tools, task management tools, UI libraries, and interfaces Calling tools and browser compatibility, etc.;

Development of small programs, small programs in designated environments will provide developer tools, APIs and standardized development standards. Since the mini program runs in a specified environment and the API is provided in a specified environment, there is no need to consider browser compatibility.

In H5 development, HTML/CSS commonly used on the front end has specified file standards in different mini programs. For example:

Use WXML/WXSS in WeChat mini programs;

Use AXML/ACSS in Alipay mini programs and DingTalk E applications;

Use Baidu smart mini programs Use SWAN/CSS;

......

The development specifications will have clear usage introductions in the designated official documents. The usage method is similar to the original H5 development, so get started. Development is relatively easy.

3. Differences in user experience

H5 pages need to be rendered in the browser, and there will be lags when complex business logic or rich page interactions occur;

Except for the small program being slightly slow for the first time, page switching and jumps are very smooth, close to Native.

Through the above-mentioned different introductions between mini programs and H5, we can find that the original monitoring of H5 pages cannot directly monitor mini programs; at the same time, due to the strong closed nature of mini programs, different mini programs have different standards. There are also slight differences. Mini programs such as WeChat mini programs, Alipay mini programs, and DingTalk E applications will also have some differences in the use of standard and open APIs, so the monitoring of mini programs will differ from the monitoring of web applications. different.

The current situation of small program monitoring

Currently, the monitoring of small programs is roughly divided into the following categories:

1. Data statistical analysis of small programs , to assist mini program operations

Related products: WeChat mini program assistant, Aladdin mini program statistics platform, etc.;

Features: Most of them provide corresponding data statistical analysis capabilities for WeChat mini programs, Analyzing user data related to mini programs from multiple dimensions is suitable for mini program operations, but it lacks monitoring of user experience and mini program performance.

2. Mini program error monitoring

Related products: FunDebug, etc.;

Features: Monitor the errors caused by mini programs to help developers discover and solve mini program errors , but there is a lack of monitoring of the global performance of the mini program, and slow requests and slow pages cannot be monitored.

3. Mini program performance monitoring

Related products: FrontJS, Tingyun mini program monitoring, etc.;

Features: Mainly provides performance-related data, including JS errors, network requests Response, etc. However, it only supports WeChat mini programs, and there is no way to correlate the performance of mini programs with the performance of background applications, making it impossible to form end-to-end monitoring.

Through the above analysis of existing mini program monitoring products, there are the following problems:

cannot support all mini program monitoring, and mainly supports WeChat mini programs;

Support Products that monitor multiple types of mini programs provide less data related to mini programs, mainly focusing on error monitoring;

There is no performance monitoring of background application services, and performance problems on mini programs cannot be traced back to background application code and Database cannot form end-to-end monitoring.

Based on the above situation, Alibaba Cloud ARMS front-end monitoring launches mini program monitoring, aiming to help quickly locate mini program problems end-to-end and improve the user experience of mini programs.

Capabilities provided by mini program monitoring

Alibaba Cloud ARMS front-end monitoring The mini program monitoring launched this time has the following characteristics:

1. Covers all types of programs that comply with standards and specifications Mini program

First explain the "standard and standardized mini program" mentioned here, which includes two layers: App and Page:

App is used to describe the overall program, including: onError event;

Page is used to describe each page, including: onShow, onHide, onUnload events.

The running environment of mini programs depends on the corresponding client. The DSL designs of various mini programs look similar, but there are still many differences in details, and there is a trend of differentiation. In this case, in order to better support the monitoring requirements of mini programs, Alibaba Cloud ARMS front-end monitoring provides the following mini program monitoring scenarios:

微信小程序
支付宝小程序
钉钉 E 应用
其他类别小程序

Due to the rapid development of mini programs, it is now impossible to target various mini programs All provide corresponding monitoring SDKs, so mini programs that do not belong to WeChat mini programs, Alipay mini programs, and DingTalk E applications can choose to access the scenarios of other categories of mini programs for monitoring, but they must meet the "standard specification mini programs" mentioned above. "Prerequisite, npm packages are also supported.

2. Complete performance monitoring indicators

Basic business indicators to help understand the usage of mini program applications:

Total application PV/UV

page Dimensional PV/UV

Indicators of each dimension of the mini program:

Mobile phone model

Operating system version

WeChat/Alipay and other corresponding APP versions

Network, etc.

JS error analysis:

JS error rate, error clustering, JS error stack and error location, etc.

API request tracking:

API request success rate, API request time consumption and API request link tracking

Custom event statistics

Support business custom event sum/avg statistics

3. The reporting method can be selected through configuration

Due to the different demands of business parties for monitoring, we not only support elegant silent data reporting, but also support customized reporting using open statistical capabilities. For details, please view the relevant documents of the mini program scenario in the front-end monitoring access overview of the official website:

https://help.aliyun.com/document_detail/106086.html

Summary

Mini programs are a direction heavily supported by major Internet companies. In the future, the number of applications of mini programs will increase, and the focus on user experience and improvement demands will also continue to increase. Alibaba Cloud The mini program monitoring provided by ARMS front-end monitoring can help customers monitor and discover quality problems in real time, providing a solid guarantee for the stable operation of the enterprise's mini programs.

The above is the detailed content of How to view the stability guarantee of small programs from the perspective of a front-end programmer. For more information, please follow other related articles on the PHP Chinese website!