AST实现函数错误的自动上报(原理到实践)

打开 plugin 的 src/index.js 编辑：

const parser = require(“@babel/parser”);

// 先来定义一个简单的函数

let source = `var fn = function (n) {

console.log(111)

}`;

// 解析为 ast

let ast = parser.parse(source, {

sourceType: “module”,

plugins: [“dynamicImport”]

});

// 打印一下看看，是否正常

console.log(ast);

终端执行 node src/index.js 后将会打印如下结果：这就是 fn 函数对应的 ast，第一步解析完成！

获取当前节点的 AST

然后我们使用 babel-traverse 去遍历对应的 AST 节点，我们想要寻找所有的 function 表达可以写在 FunctionExpression 中：

打开 plugin 的 src/index.js 编辑：

const parser = require(“@babel/parser”);

const traverse = require(“babel-traverse”).default;

// mock 待改造的源码

let source = `var fn = function() {

console.log(111)

}`;

// 1、解析

let ast = parser.parse(source, {

sourceType: “module”,

plugins: [“dynamicImport”]

});

// 2、遍历

+ traverse(ast, {

+   FunctionExpression(path, state) { // Function 节点

+     // do some stuff

+   },

+ });

所有函数表达都会走到 FunctionExpression 中，然后我们可以在里面对其进行修改。其中参数 path 用于访问到当前的节点信息 path.node，也可以像 DOM 树访问到父节点的方法 path.parent。

修改当前节点的 AST

好了，接下来要做的是在 FunctionExpression 中去劫持函数的内部代码，然后将其放入 try 函数内，并且在 catch 内加入错误上报 sdk 的代码段。

获取函数体内部代码

上面定义的函数是

var fn = function() {

console.log(111)

}

那么函数内部的代码块就是 console.log(111)，可以使用 path 拿到这段代码的 AST 信息，如下：

const parser = require(“@babel/parser”);

const traverse = require(“babel-traverse”).default;

// mock 待改造的源码

let source = `var fn = function(n) {

console.log(111)

}`;

// 1、解析

let ast = parser.parse(source, {

sourceType: “module”,

plugins: [“dynamicImport”]

});

// 2、遍历

traverse(ast, {

FunctionExpression(path, state) { // 函数表达式会进入当前方法

+    // 获取函数当前节点信息

+    var node = path.node,

+        params = node.params,

+        blockStatement = node.body,

+        isGenerator = node.generator,

+        isAsync = node.async;

+    // 可以尝试打印看看结果

+    console.log(node, params, blockStatement);

}，

});

终端执行 node src/index.js，可以打印看到当前函数的 AST 节点信息。

创建 try/catch 节点（两步骤）

创建一个新的节点可能会稍微陌（fu）生（za）一点，不过我已经为大家总结了我个人的经验（仅供参考）。首先需要知道当前新增代码段它的声明是什么，然后使用 @babel-types 去创建即可。

第一步：

那么我们如何知道它的表达声明type是什么呢？这里我们可以 使用 astexplorer 查找它在 AST 中 type 的表达。如上截图得知，try/catch 在 AST 中的 type 就是 TryStatement！

第二步：

然后去 @babel-types 官方文档查找对应方法，根据 API 文档来创建即可。如文档所示，创建一个 try/catch 的方式使用 t.tryStatement(block, handler, finalizer)。

创建新的ast节点一句话总结：使用 astexplorer 查找你要生成的代码的 type，再根据 type 在 @babel-types 文档查找对应的使用方法使用即可！

那么创建 try/catch 只需要使用 t.tryStatement(try代码块, catch代码块) 即可。

• try代码块 表示 try 中的函数代码块，即原先函数 body 内的代码 console.log(111)，可以直接用 path.node.body 获取；

• catch代码块 表示 catch 代码块，即我们想要去改造进行错误收集上报的 sdk 的代码 ErrorCapture(error)，可以使用 @babel/template 去生成。

代码如下所示：

const parser = require(“@babel/parser”);

const traverse = require(“babel-traverse”).default;

const t = require(“babel-types”);

const template = require(“@babel/template”);

// 0、定义一个待处理的函数（mock）

let source = `var fn = function() {

console.log(111)

}`;

// 1、解析

let ast = parser.parse(source, {

sourceType: “module”,

plugins: [“dynamicImport”]

});

// 2、遍历

traverse(ast, {

FunctionExpression(path, state) { // Function 节点

var node = path.node,

params = node.params,

blockStatement = node.body, // 函数function内部代码，将函数内部代码块放入 try 节点

isGenerator = node.generator,

isAsync = node.async;

+    // 创建 catch 节点中的代码

+    var catchStatement = template.statement(ErrorCapture(error))();

+    var catchClause = t.catchClause(t.identifier(‘error’),

+          t.blockStatement(

+            [catchStatement] //  catchBody

+          )

+        );

+    // 创建 try/catch 的 ast

+    var tryStatement = t.tryStatement(blockStatement, catchClause);

}

});

创建新函数节点，并将上面定义好的 try/catch 塞入函数体：

const parser = require(“@babel/parser”);

const traverse = require(“babel-traverse”).default;

const t = require(“babel-types”);

const template = require(“@babel/template”);

// 0、定义一个待处理的函数（mock）

let source = `var fn = function() {

console.log(111)

}`;

// 1、解析

let ast = parser.parse(source, {

sourceType: “module”,

plugins: [“dynamicImport”]

});

// 2、遍历

traverse(ast, {

FunctionExpression(path, state) { // Function 节点

var node = path.node,

params = node.params,

blockStatement = node.body, // 函数function内部代码，将函数内部代码块放入 try 节点

isGenerator = node.generator,

isAsync = node.async;

// 创建 catch 节点中的代码

var catchStatement = template.statement(ErrorCapture(error))();

var catchClause = t.catchClause(t.identifier(‘error’),

t.blockStatement(

[catchStatement] //  catchBody

)

);

// 创建 try/catch 的 ast

var tryStatement = t.tryStatement(blockStatement, catchClause);

+    // 创建新节点

+    var func = t.functionExpression(node.id, params, t.BlockStatement([tryStatement]), isGenerator, isAsync);

+    // 打印看看是否成功

+    console.log(‘当前节点是:’, func);

+    console.log(‘当前节点下的自节点是:’, func.body);

}

});

此时将上述代码在终端执行 node src/index.js：可以看到此时我们在一个函数表达式 body 中创建了一个 try 函数（TryStatement）。最后我们需要将原函数节点进行替换：

const parser = require(“@babel/parser”);

const traverse = require(“babel-traverse”).default;

const t = require(“babel-types”);

const template = require(“@babel/template”);

// 0、定义一个待处理的函数（mock）

let source = `var fn = function() {…

// 1、解析

let ast = parser.parse(source, {…

// 2、遍历

traverse(ast, {

FunctionExpression(path, state) { // Function 节点

var node = path.node,

params = node.params,

blockStatement = node.body, // 函数function内部代码，将函数内部代码块放入 try 节点

isGenerator = node.generator,

isAsync = node.async;

// 创建 catch 节点中的代码

var catchStatement = template.statement(ErrorCapture(error))();

var catchClause = t.catchClause(t.identifier(‘error’),…

// 创建 try/catch 的 ast

var tryStatement = t.tryStatement(blockStatement, catchClause);

// 创建新节点

var func = t.functionExpression(node.id, params, t.BlockStatement([tryStatement]), isGenerator, isAsync);

+    // 替换原节点

+    path.replaceWith(func);

}

});

+ // 将新生成的 AST，转为 Source 源码：

+ return core.transformFromAstSync(ast, null, {

+  configFile: false // 屏蔽 babel.config.js，否则会注入 polyfill 使得调试变得困难

+ }).code;

“A loader is a node module exporting a function”，也就是说一个 loader 就是一个暴露出去的 node 模块，既然是一个node module，也就基本可以写成下面的样子:

module.exports = function() {

//  …

};

再编辑 src/index.js 为如下截图：

边界条件处理

我们并不需要为所有的函数都增加 try/catch，所有我们还得处理一些边界条件。

• 1、如果有 try catch 包裹了

• 2、防止 circle loops

• 3、需要 try catch 的只能是语句，像 () => 0 这种的 body

• 4、如果函数内容小于多少行数

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。