AST实现函数错误的自动上报(原理到实践)，web前端在线开发

+     // 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、如果函数内容小于多少行数

满足以上条件就 return 掉！代码如下：

if (blockStatement.body && t.isTryStatement(blockStatement.body[0])

|| !t.isBlockStatement(blockStatement) && !t.isExpressionStatement(blockStatement)

|| blockStatement.body && blockStatement.body.length <= LIMIT_LINE) {

return;

}

最后我们发布到 npm 平台 使用。由于篇幅过长不易阅读，本文特别的省略了本地调试过程，所以需要调试请移步 【利用AST自动为函数增加错误上报-续集】有关 npm 包的本地开发和调试。

如何使用

---

npm install babel-plugin-function-try-catch

webpack 配置

rules: [{

test: /.js$/,

exclude: /node_modules/,

use: [

+   “babel-plugin-function-try-catch”,

“babel-loader”,

]

}]

效果见如下图所示：

最后

–

有关 npm 包的本地调试见下篇： 有关 npm 包的本地开发和调试：https://juejin.im/post/6888493557716353032/

更多 AST 相关请关注后面分享，谢谢。

Reference：

完整代码地址请点击：https://github.com/allan2coder/babel-plugin-function-try-catch

Babel 插件手册点击：https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md

点个『在看』支持下 

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-57WgCZtz-1711898115044)]

总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；