Error isolation in JavaScript

Interface request failure, part of the data in the interface is missing, operational data does not meet expectations... When our application is released and online, we begin to face these risks.

　 Once these problems lead to JavaScript errors (such as null pointer exceptions) and are not effectively isolated, they may cause online problems such as white screens on the page and inability to interact.

During the preparations for Double 11, we collected front-end related online issues in the past year. Among the 21 cases collected, half of the issues were related to the reason "data anomalies trigger page display exceptions".

　How to isolate the impact of errors within a certain range is particularly important.

　This article will talk with you about some of the solutions we have tried and the problems we encountered.

　Starting with Null Pointer Exception

　 The most common problem caused by data is Null Pointer Exception.

　var result = a.b.c.d;

　 Such code is like a landmine. Once a is a dynamic data, problems are about to occur.

　Encapsulate a get method to get the value. When the data does not exist, undefined is returned, which can quickly avoid such problems.

　var result = get(a, 'b.c.d'); 
　但如同我们期望大家在取值前，都先做判断一样，并不能保证所有人都这么用了，用不用全靠自觉。
if (a && a.b && a.b.c) {
        var result = a.b.c.d;
}

So, we have the following solutions:

Asynchronous data verification

The idea of ​​asynchronous data verification is to do a schema verification after data acquisition and before use to detect important data Missing and type mismatch exceptions.

Corresponding to this solution, we encapsulated the fetch-checker Note 1 component based on fetch.

　　fetch-checker forces users to provide the schema corresponding to the data when requesting data:

let schema = {
    "rule": {
      "type": "string",
    },
    "banner": {
      "type": "object",
      "required": true,
      "default": {
        "url": "https://item.taobao.com/item.htm?id=527331762117"
      }
    }
};

This schema needs to be described:

　The type of each field

　 Whether the field is required

　 When required When fields are missing, do you need to base the data? After fetch-checker gets the data, it first performs a layer of verification. If necessary, it fills in the missing data and then returns it to the caller. In this way, the data obtained by the user must be in line with expectations.

　However, the challenge facing this solution is:

　How to ensure that the caller provides a complete schema description. If you don’t want to write a schema, you can provide a rough schema description to pass the verification.

　How to streamline schema. That is to say, it will not have a big impact on the bundle size, and it can also meet the verification function.

　Code Compilation

　Inspired by babel, this solution is to convert code with NPE risks into equivalent safe code during the compilation phase. As shown below:

var a = {};
// input
var result = a.b.c;
// output
var result = (_object2 = (_object3 = a) == null ? null : _object3.b) == null ? null : _object2.c;

When a is an empty object, executing the compiled code will return null , thus avoiding blocking subsequent processes due to code throwing errors.

　In the Babel plug-in babel-plugin-safe-member-expression Note 2, we made the above attempt. Currently, in the cake project, this function can be selectively enabled through the configuration enableSafeMemberExpression.

　 This solution has a lower access cost in comparison, and developers do not need to make adjustments to the existing code, but there are still challenges:

　 Problems during the development phase are not easily exposed, and there is no feedback on scenarios where errors should be reported. The ideal state is: expose as many problems as possible during the development and debugging phase, and reduce errors as much as possible online.

　 How to define hidden codes? At present, all a.b calling methods will be compiled according to the above scheme. Although no problems have been found during the testing process, it is safer to only deal with code with hidden dangers.

　Static verification

　　以 flow 为代表的静态校验工具，可以在一定程度上检测出 NPE 隐患。
type res = {
        data ?: Object
}
let name = res.data.name;
// property `name`. Propery cannot be accessed on possibly undefined value

As described in the above code, users need to first clarify whether their data is allowed to be null. When data is allowed to be null, it is detected through flow, data.name Calls like this will detect errors.

However, how to promote all businesses to have access to static verification, and how to ensure that developers describe all types after access, is also a difficulty.

The above is the content of error isolation in JavaScript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!