1. Introduction

As a confident QA, if someone has a problem with a project that has passed the test, the first thing that comes to mind is: No way! There must be something wrong with the operation. Since joining the company, I have handled more than 40 projects, large and small, without any problems. In the annual summary, I confidently wrote that all projects were released on time and with quality, without any online problems.

However, this confidence let me take it lightly, so that the wechat small program SDK’s first online problems also followed.

For online problems, many people may think that the problem solved is done, and do not pay attention to the problem of the second review. In fact, it may do more than solve the problem itself.

Review is an important part of shence’s corporate culture, and every question is a valuable asset for us. Through the review of the problem, to sum up the experience and lessons, can better promote our growth.

Now let’s look at how this problem is reworked.

2. Review your goals

Shence micro channel small program SDK goal is to achieve the mainstream small program development framework of the full buried functions. However, in the testing process, it was found that the Taro3.0 framework redefined the logic of tag click behavior, so that a click behavior would trigger the SDK’s two-click event $MPClick, resulting in buried data duplication.

Therefore, the release of v1.14.3 version aims to solve the problem of repeated trigger of click events under the Taro3.0 framework, and achieve the full buried point collection without frame obstacles in the real sense of the Micro channel small program SDK.

3. Evaluation results

3.1. Meeting objectives

  • Solve the problem that click events are triggered repeatedly in Taro3.0 framework.
  • Achieve shence micro channel small program SDK in the real sense of no framework obstacles full buried point collection.

3.2. Below target

  • There are serious online problems with this release.

4. Analyze the reasons

4.1. Review the process

  1. Wechat small program SDK released v1.14.3, added $MPClick event customizable attribute, fixed the Taro3.0 framework click event repeatedly triggered the problem;
  2. The technical consultant received the customer’s feedback: after the SDK of wechat small program was updated to v1.14.3, it was found during the test that the SDK tampered with the return value of their method, which belongs to the sabotaged proxy;
  3. At 16:30 on December 18, 2020, the technical consultant checked the code and found that this problem had occurred in alipay mini program before, and reappeared the problem together with QA.
  4. At 16:35 on December 18, 2020, the problem was synchronized to the R&D and QA team leader, and the next specific work was assigned: QA went to GitHub to delete the corresponding version code, the R&D team leader assisted in deleting the version on NPM, and the R&D team began to repair the problem;
  5. The version was deleted by the R&D team leader and QA at 16:37 on December 18, 2020;
  6. 16:45 December 18, 2020 r&d repair completed, submitted to QA testing;
  7. The QA test was completed at 18:05, December 18, 2020, and the latest fix v1.14.4 was released, completing the online verification;
  8. The technical advisor team leader identified all customers using the problem version V1.14.3 and synchronized them to the technical advisor;
  9. The Technical Advisor notified all customers using V1.14.3 of the problems and reminded them of the update.

The entire life cycle of the issue lasted 44 hours from 19:05 on December 17, 2020 to 15:00 on December 19, 2020, when all customers were notified. It can be divided into six phases as shown in Figure 4-1:

Figure 4-1 Online problem lifecycle

This is the first online problem I have experienced. This experience not only gives me a complete understanding of the handling process of online problems, but also makes me fully feel the close cooperation of team members in each link. From the beginning of the problem to the solution of the problem, the small program team is always on standby, each link is racing against time, to ensure the rapid repair of the problem, without causing a major impact.

After reviewing the entire process of an online problem, we need to analyze the specific causes of the problem.

4.2. Cause analysis

4.2.1. Automatic collection of click events

Before the specific reason analysis, we first look at the principle of shence wechat small program SDK automatic collection of click events.

_.getmethods ();}}}}}}}}

Page = function (option) {// If configured to really get the custom method and agent to rewrite the var methods = sa. Para. AutoTrack && sa. Para. AutoTrack. MpClick && _. GetMethods (option). if(!! methods) { for(var i = 0, len = methods.length; i < len; I ++) {// Override click_proxy(option, methods[I]) for each custom event handler in the methods set; GetMethods = function(option) {var methods = []; for (var m in option) { if (typeof(option[m])==='function' && ! mpHook[m]) { methods.push(m); } } return methods; }Copy the code

$MPClick will be triggered if type is tap, Longpress, or longtap. $MPClick will be triggered if type is tap. Put the attributes defined by the dataset in the WXML file tag as the event attributes:

Function click_proxy(option, method) {var oldFunc = option[method]; Option [method] = function() {var res = oldFunc. Apply (this, arguments); var prop = {}, type = ''; If (_. IsObject (the arguments) [0]) {/ / will WXML label the dataset definition as the event attribute in the var dataset. = current_target dataset | | {}; type = arguments[0]['type']; prop['$element_id'] = current_target.id; prop['$element_type'] = dataset['type']; prop['$element_content'] = dataset['content']; prop['$element_name'] = dataset['name']; } if(type && _.isClick(type)) { prop['$url_path'] = _.getCurrentPath(); sa.track('$MPClick', prop); } return res; }}; Taps = function(type) {taps = {" taps ": 1, "taps ": 1," taps ": 1, "taps ": 1,}; return !! mpTaps[type]; }Copy the code

The automatic collection of click events can not only collect user click behavior, but also automatically collect click label attributes.

As long as the attributes defined by data- in the tag of the WXML file can be collected, the attributes that can be automatically collected are shown in Table 4-1:

Table 4-1 Automatic collection properties

It is recommended to define one of the three elements id, data-content, and data-name as the element identification. Without these three attributes, the identification cannot be carried out on the Shence analysis platform.

Next, let’s look at an example of automatically collecting click events.

1. Configure the following button label:

<button bindtap="test" data-name="button" id="button" data-content='button' data-type="button"> </button>Copy the code

2. The event content triggered by clicking button is as follows:

{"distinct_id":"1610349175397-726909-0e567a51188708-20891891""lib":{"$lib":"MiniProgram""$lib_method":"code""$lib_versio N ":" 1.14.4 "} "properties" : {" $lib ":" MiniProgram "$lib_version" : "" 1.14.4" $network_type ":" "wifi" $manufacturer ":" "devtools" "$m odel":"iPhone 6/7/8 Plus $screen_width "" :" 414 "$screen_height" : 736 "$OS" : "devtools" "$os_version 10.0.1" : "" "$timezone_offset ": - 480" $app_id wx82 ":" a49f7cb5547449""$url_path":"pages/index/index""$element_id":"button""$element_type":"button""$element_content":"button"" $is_first_day $element_name ":" button "" :" false "IP" : "$117.71.111.48" $" browser ":" WeChat "" $browser_version 7.0.4" : "" "$is_login }"anonymous_id":" 1610349175397-726909-0e567A51188708-20891891 ""type "$city":" $province":" anhui ""$country":" China "}"anonymous_id":" 1610349175397-726909-0e567A51188708-20891891 ""type ":"track""event":"$MPClick""time":1615194119222"is_login_id":false"map_id":"1610349175397-726909-0e567a51188708-20891891 ""user_id":-8183290914376425000"recv_time":1615194119222"project":"gongcheng"}Copy the code

At this point, we can see that the button click event is automatically collected.

4.2.2. Specific reasons

After understanding how the micro channel small program SDK realizes the principle of automatic collection of click events, it is easier to analyze the cause of the problem. Let’s look at the specific cause of the problem.

1, first we need to understand the Page logic of the small program, each Page has a separate JS file for the Page component to add the execution logic, all methods are written in Page({}), mainly contains three parts: the initial data of the Page, the small program itself with the life cycle function and custom function method. For example, the two methods testA and testB are defined in the following example:

OnLoad: function (options) {}, /** * custom testA */ testA: Function () {console.log(' testB ', this.b ())}, /** * testB: function () {return 'testB'}})Copy the code

2. According to the principle of automatic collection of click events mentioned in the previous section, we rewrite the proxy for all custom methods of the client applets. We judge that the type of type is $MPClick event triggered when the user clicks, but the premise must be that the execution of the custom methods cannot be affected;

3. When updating the existing logic, the small program SDK V1.14.3 modified the return value of the proxy method, changing the execution result of the return client method to directly return false, as shown in Figure 4-2:

Figure 4-2 Diff diagram of small program SDK V1.14.3

4. This makes the testB() method defined by Page in the above code. The original customer business logic is “return ‘execute method B'”, but it is rewritten by our SDK method to become “return false”.

5. TestA () should have printed the return value defined in testB(), but the SDK agent caused testB() to return false, so testA() did not execute as expected, as shown in Figure 4-3:

Figure 4-3 Error result of testA()

Figure 4-4 shows the correct service logic execution result.

4.2.3. Solutions

Once you know the cause of the problem, it’s easier to solve it. You only need to change the return value to the return value of the original client method when you broker the client method, as shown in Figure 4-5:

5. Summarize the rules

5.1. Lessons learned

Although the cause of this online problem is relatively simple, after deep reflection, I have summarized the following lessons:

  1. QA needs to have a keen awareness of code changes, and should thoroughly investigate the purpose of each line of code change. For code diff, be sure to know what it is and why. QA may not need to write complex code, but it must be able to read the code, or test coverage will be low;
  2. The problem occurred mainly because QA’s test case did not cover the return value of the method, and the basic principle of the small program was not deeply understood. Therefore, QA needs to be familiar with the business of testing and explore test cases through business attributes;
  3. QA did not follow the procedure and started the test directly before the R & D leader gave the reply that the code review was approved. This makes the test code undouble-checked and prone to problems;
  4. This problem is a recidivism, the same problem has occurred in other small programs before. This kind of recidivism problem is the most terrible, indicating that there is no good summary of the problems that arise. For QA, missing cases need to be added to regression test cases, and regression test cases should be summarized periodically.

Problem of 5.2.

Through this online issue, I exposed some of my problems as a QA:

  1. Not familiar enough with SDK code and applets fundamentals;
  2. Not getting to the bottom of code changes and not knowing enough about the relevant logic;
  3. Not strictly following the testing process;
  4. Failure to summarize existing problems in time leads to the recurrence of the same problems.

5.3 improve

After the review of the online problems, we have taken the following actions as the direction of improvement:

  1. QA will finish the familiar reading of wechat small program SDK code in Q1 of 2021, and the R & D shall be responsible for organizing more than two trainings on basic principles of small program for QA, so as to make QA and R & D reach the same level of code understanding;
  2. In future projects, R&D needs to evaluate changes in detail, accurately locate the impact range, and make key remarks on the corresponding test email, so that QA can design test cases in more detail;
  3. After this problem, QA and R&D should strictly abide by the development and testing process, supervise each other, and never cross boundaries or violate rules in any process.
  4. QA will complete a detailed summary of this issue by the end of December 2020 and add the missed case to the regression test case to prevent the same issue from happening again.

6. Conclusion

This paper introduces the whole process of the recheck of an online problem, and hopes to provide you with some reference to the recheck.

More content, welcome to pay attention to the public number: Shence technology community