/TryCatchWrapper

用try catch包裹你的函数,避免报错

Primary LanguageJavaScript

背景

js是单线程的弱类型的脚本语言,所以很多错误会在运行的时候才会发现,一旦出现运行时的错误,那么整个js线程都会挂掉,导致我们页面没有响应,所以我们需要有一种手段来避免,而将代码用try catch包括就是最容易实现的一种方式,但是前端工程师们很少会用try catch把代码包括起来,那么就需要一种手段来自动化去做这件事情。

既然我们要做的事情就是把函数体全部用try catch包裹起来,那么就需要遍历整个代码的所有函数,因此AST是一个最适合的选择。借助AST语法树,我们可以遍历所有函数,并修改函数里面的内容。

AST语法树

抽象语法树是一种统一的结构,能够把各种语言转化成一种统一的树形结构,即是说所有的语言都会转化成一种统一的结构,以便计算机识别。

我们看看浏览器执行js的过程:js引擎将js解析成AST->编译成字节码->执行

抽象语法树例子:

while (b != 0) {
    if (a > b) {
        a = a - b
    } else {
        a = b -a
    }
    return a
}   

计算机语言,一般都是由Statement、expression和declaration组成。所以,在了解AST前,我们需要了解这三个是什么。

Statement

语句是用来控制程序流程或者用来管理零个或多个语句。

  • BlockStatement:大括号包裹起来的语句块
  • IfStatement: if语句
  • SwitchStatement: switch语句
  • WhileStatement: while语句
  • ForStatement: for语句
  • TryStatement: try语句

Expression

表达式是用来计算或者返回 一个结果的,比如所有的运算操作都是表达式,除此之外,函数的调用也是一种表达式,es6的箭头函数也是一种表达式。
js中有函数/数组/类表达式的概念,即把一个函数/数组/类赋值给一个变量(其他语言不知道...)。

expression description
BinaryExpression 二元运算表达式,eg: +-*/
ConditionExpression 三元运算表达式,eg: ()? :
LogicalExpression 逻辑运算表达式
CallExpression 函数调用表达式
ArrowFunctionExpression 箭头函数表达式
FunctionExression 函数表达式
ArrayExpression 数组表达式
ClassExpression 类表达式

Declaration

js中,变量的申明不外乎三种方式var、const和let,还有二个很特殊的,函数申明和类申明。除此之外,es6还有import申明。

当然,这里面所列的不是全的,只是一些大家听过比较多,运用应该也是比较多的。如果要了解更多,可以通过babel-types的官网去了解。点击进入

抽象语法树的运用

简单来说只要用到语法分析或者修改修改源码的,都可以利用抽象语法树来完成,比如typescript语法校验、IDE的语法校验高亮、eslint、ulglify-js、以及babel的tramsform、@babel/preset-react等等。可想而知,抽象语法树运用还是很广的。

实现思路

通过babel库来实现。babel-core提供了访问修改AST的功能,所以我们可以直接利用babel库来实现,同时我们需要用到babel-types和@babel/template的babel工具包。

  • babel-core,babel核心包,可以访问AST树并对代码进行转换。
  • babel-types,babel工具包,可以用来判断一个树节点是什么类型以及创建statement、declaration以及expression这些树节点。
  • @babel/template,方便将字符串转为AST节点。

我们的思路是,找到所有函数可能出现的AST节点,找到这些节点后,我们可以在遍历这些节点的时候,找出函数里面的内容,然后通过babel-types提供的方法去生成TryStatement,把函数里面的内容包裹起来,然后覆盖掉原来的函数里面的内容。

定义访问器

在上面对AST的介绍中,我们可以找到函数定义有三种方式,即FunctionExpression、ArrowFuntionExpression和FunctionDeclaration,因此我们就可以定义我们的访问器了。

var babel = require('babel-core');
var babelPlugin = { visitor };
let visitor = {
  ArrowFunctionExpression(path) {
    // do stuff here
  },
  FunctionExpression(path) {
    // do stuff here
  },
  FunctionDeclaration(path) {
    // do stuff here
  }
}
var result = babel.transform(code, {
  plugins: [
    babelPlugin
  ]
})
console.log(result.code)

获取函数里面的内容并生成TryStatement

函数里面的内容,正常情况下,它只可能是一个BlockStatement,但是箭头函数出现后,它就变得复杂了,它除了会是一个BlockStatment外,也有可能是一个表达式,亦或者一个值。
我们看下普通的函数申明的AST树:

function test() {
    console.log(111)
}

它对应的AST树是这样的

可以看到,如果是blockStatment的话,函数里面的内容是body.body数组。

箭头函数的函数内容直接为一个值的情况:

var test = () => 0

对应的AST如下:

总之,我们获取函数里面的内容,就是取函数节点的body属性,然后利用babel-types生成TryStatement。生成TryStatement请参考这里

let visitor = {
  'ArrowFunctionExpression|FunctionExpression|FunctionDeclaration': function(path) {
      let body = path.node.body
      // ...此处省略catch的生成
      let tryStatement = types.tryStatement(body, catchClause);
  }
}

注意我们上面指出了try statement的生成,但是我们还未定义catch里面的内容,下面会讲到。

生成catch体

catch是一个类型函数的东西,但它又不是,它接受一个参数,这个参数就是Error对象,catch里面的内容我们一般会对异常进行一些处理,比如然后上报到后端,但是很多时候我们的代码是经过混淆压缩的,所以error里面我们不能获取到具体发生错误的具体行列以及导致error的函数的函数名。

那么我们要如何定位到异常发生的地方呢?一般我们需要四个纬度的信息:文件名、函数/方法名、行数和列数,我们在访问函数节点的时候,AST节点实际上是保留了这些信息的。所以我们可以在访问器中事先获取这些信息,并把它塞到原来的catch体里面。这里的行列只能是函数开始的行列,不能定位到error发生的行列。

获取行列信息很简单,通过获取节点的loc属性便可,文件名也是很容易获取的,它保存在访问器的state参数中。但是获取函数名,就比较复杂了,函数的定义,有三种方式,如果不是以函数申明的方式定义函数,那么函数名的获取,需要从它父节点中获取,并且还要判断父节点的类型,如果是普通的函数表达式,从父节点的id属性获取,如果是对象属性方法,那么需要从父节点的key属性获取。实际上还有类的情况没考虑,这里先不考虑,后续有时间再补充。还有一种情况就是函数可能是匿名的。综合考虑后,获取函数名的代码如下:

let visitor = {
  'ArrowFunctionExpression|FunctionExpression|FunctionDeclaration': function(path, state) {
      let node = path.node
      let body = node.body
      // 文件名
      let filename = state.file.opts.filename
      // 获取行列
      let line = node.loc.start.line
      let column = node.loc.start.column
      
      // 获取函数名
      let funcName = 'anonymous function';
      // 如果是函数申明,则可以直接从id属性获取
      if (node.id) {
        funcName = node.id.name
      } 
      // 有父节点,并且父节点是申明,则说明是函数申明的方式创建的函数,需要从父节点获取函数名 
      if (types.isVariableDeclarator(path.parentPath)) {
        funcName = path.parentPath.node.id.name;
      } else if (types.isProperty(path.parentPath)) {
        // 通过对象属性定义的函数
        funcName = path.parentPath.node.key.name;
      } 
     
      // ...此处省略catch的生成
      let tryStatement = types.tryStatement(body, catchClause);
  }
}

有行列以及函数名,我们就需要把这些信息存到一个变量,那么就可以利用babel-types来生成真个变量对应AST节点了,点击这里获取如何生成申明变量的节点,代码如下:

// 生成一个变量申明的AST节点 值包含了函数的行数、列数、函数名以及文件名
let infoDeclarator = types.variableDeclaration('var', [
    types.variableDeclarator(
      types.identifier('info'),
      types.ObjectExpression([
        types.objectProperty(types.identifier('line'), types.numericLiteral(node.loc.start.line)),
        types.objectProperty(types.identifier('row'), types.numericLiteral(node.loc.start.column)),
        types.objectProperty(types.identifier('function'), types.stringLiteral(funcName)),
        types.objectProperty(types.identifier('filename'), types.stringLiteral(filename))
      ]))
]);

接着我们需要知道如何把处理异常的handler函数里面的内容转为catch里面的内容,这个时候就需要用到@babel/template包了,这里直接贴代码,怎么使用@babel/template,点击这里

// 将处理异常的handler转为AST节点
let catchStatement = template.statement(`var tmp = ${report.toString()}`)();
// 然后从AST节点中获取函数体 作为catch里面的内容
let catchBody = catchStatement.declarations[0].init.body ; 

report是处理异常的handler函数,实际运用的时候,应该开放给用户自定义。拿到catch里面的内容后,我们就可以根据babel-types去生成catch里面的内容了。

这里我是直接通过var temp = code的方式去生成一个函数表达式,然后来获取函数体里面的body节点,你当然也可以直接根据函数生成AST节点,然后去获取这个函数节点的body节点,不过你要考虑不同情况的函数定义,获取body的方式不同

let catchClause = types.catchClause(types.identifier('error'), 
// 第一个值是我们生成的包含行列以及函数名的变量
// 第二个值是handler的内容
types.blockStatement(
    [infoDeclarator, catchBody.body[0]]
));
let tryStatement = types.tryStatement(body, catchClause);

替换原来的函数内容

最后,我们就需要生成包含了try catch的新的函数替换原来函数,这里需要判断函数是怎么定义的,根据不同的定义,去生成不同的函数内容替换原来的。

let func = null;
// 区分是函数申明还是函数表达式
if (types.isFunctionDeclaration(node)) {
    func = types.functionDeclaration(node.id, node.params, types.BlockStatement([tryStatement]), node.generator, node.async);
} else {
    func = types.functionExpression(node.id, node.params, types.BlockStatement([tryStatement]), node.generator, node.async);
}
path.replaceWith(func);

防止circle loops以及过滤不需要try catch的函数内容

代码大体上是完成了,但是如果你试着去跑一下,你会发现,会发生死循环,原因就是替换的时候又会导致再次触发访问新的AST树,这样无限循环下去,所以我们需要把用try catch包裹后的AST树访问给跳过。

如果函数里面的内容只是简单的一个值,那么也是不需要的,比如这样的

var test = () => 0

所以,我们的过滤条件是这样的

// 1、如果有try catch包裹了,则不需要 2、防止loops 3、需要try catch的只能是语句,像() => 0这种的body,是不需要的
if (blockStatement.body && types.isTryStatement(blockStatement.body[0])
    || !types.isBlockStatement(blockStatement) && !types.isExpressionStatement(blockStatement)) {
    return;
 }

贴上全部代码的git地址:https://github.com/VikiLee/TryCatchWrapper

其他

本篇文章未涉及到类方法以及简易对象方法(通过简洁方式定义的对象方法)方面到说明,这两种类型的方法通过FunctionExpression、FunctionDeclaration和ArrowFunctionExpression的访问器都是无法访问到的,所以无法包裹类方法和简易对象方法,但是git上的代码是已经考虑了类方法和简易对象方法的情况了。

代码中也包含了如果你不想你的函数被try catch包裹或者你的函数行数太少也不想被包括,可以设置disable-try-catch的注释和行数限制来避免这个plugin去包裹,注释的方式会完全跳过下面子节点的visit。详细实现可以看下代码。

参考链接:

关于babel插件
babel-type文档
@babel/template文档
AST可视化