【编译篇】AST实现函数错误的自动上报

前言

为黑河等地区用户提供了全套网页设计制作服务，及黑河网站建设行业解决方案。主营业务为网站建设、成都网站建设、黑河网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

之前有身边有人问我在错误监控中，如何能实现自动为函数自动添加错误捕获。今天我们来聊一聊技术如何实现。先讲原理：在代码编译时，利用 babel 的 loader，劫持所有函数表达。然后利用 AST（抽象语法树） 修改函数节点，在函数外层包裹 try/catch。然后在 catch 中使用 sdk 将错误信息在运行时捕获上报。如果你对编译打包感兴趣，那么本文就是为你准备的。

本文涉及以下知识点：

  •  [x] AST
  •  [x] npm 包开发
  •  [x] Babel
  •  [x] Babel plugin
  •  [x] Webpack loader

实现效果

Before 开发环境：

 
 
 
 
      
  
  
  
  1. var fn = function(){  
    2.   
  
  
  
  2.   console.log('hello');  
    3.   
  
  
  
  3. } 
    4.

After 线上环境：

 
 
 
 
      
  
  
  
  1. var fn = function(){  
    2.   
  
  
  
  2. +  try {  
    3.   
  
  
  
  3.     console.log('hello');  
    4.   
  
  
  
  4. +  } catch (error) {  
    5.   
  
  
  
  5. +    // sdk 错误上报  
    6.   
  
  
  
  6. +    ErrorCapture(error);  
    7.   
  
  
  
  7. +  }  
    8.   
  
  
  
  8. } 
    9.

Babel 是什么？

Babel 是JS编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

简单说就是从一种源码到另一种源码的编辑器！下面列出的是 Babel 能为你做的事情：

  •  语法转换
  •  通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
  •  源码转换 (codemods)
  •  其它

Babel 的运行主要分三个阶段，请牢记：解析->转换->生成，后面会用到。

本文我们将会写一个 Babel plugin 的 npm 包，用于编译时将代码进行改造。

babel-plugin 环境搭建

这里我们使用 yeoman 和 generator-babel-plugin 来构建插件的脚手架代码。安装：

 
 
 
 
      
  
  
  
  1. $ npm i -g yo  
    2.   
  
  
  
  2. $ npm i -g generator-babel-plugin 
    3.

然后新建文件夹：

 
 
 
 
      
  
  
  
  1. $ mkdir babel-plugin-function-try-actch  
    2.   
  
  
  
  2. $ cd babel-plugin-function-try-actch 
    3.

生成npm包的开发工程：

 
 
 
 
      
  
  
  
  1. $ yo babel-plugin 
    2.

此时项目结构为：

 
 
 
 
      
  
  
  
  1. babel-plugin-function-try-catch  
    2.   
  
  
  
  2. ├─.babelrc  
    3.   
  
  
  
  3. ├─.gitignore  
    4.   
  
  
  
  4. ├─.npmignore  
    5.   
  
  
  
  5. ├─.travis.yml  
    6.   
  
  
  
  6. ├─README.md  
    7.   
  
  
  
  7. ├─package-lock.json  
    8.   
  
  
  
  8. ├─package.json  
    9.   
  
  
  
  9. ├─test  
    10.   
  
  
  
  10. |  ├─index.js  
    11.   
  
  
  
  11. |  ├─fixtures  
    12.   
  
  
  
  12. |  |    ├─example  
    13.   
  
  
  
  13. |  |    |    ├─.babelrc  
    14.   
  
  
  
  14. |  |    |    ├─actual.js  
    15.   
  
  
  
  15. |  |    |    └expected.js 
    16.   
  
  
  
  16. ├─src  
    17.   
  
  
  
  17. |  └index.js  
    18.   
  
  
  
  18. ├─lib  
    19.   
  
  
  
  19. |  └index.js 
    20.

这就是我们的 Babel plugin，取名为 babel-loader-function-try-catch（为方便文章阅读，以下我们统一简称为plugin！）。

至此，npm 包环境搭建完毕，代码地址。

调试 plugin 的 ast

开发工具

本文前面说过 Babel 的运行主要分三个阶段：解析->转换->生成，每个阶段 babel 官方提供了核心的 lib：

  •  babel-core。Babel 的核心库，提供了将代码编译转化的能力。
  •  babel-types。提供 AST 树节点的类型。
  •  babel-template。可以将普通字符串转化成 AST，提供更便捷的使用

在 plugin 根目录安装需要用到的工具包：

 
 
 
 
      
  
  
  
  1. npm i @babel/core @babel/parser babel-traverse @babel/template babel-types -S 
    2.

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

 
 
 
 
      
  
  
  
  1. const parser = require("@babel/parser");  
    2.   
  
  
  
  2. // 先来定义一个简单的函数  
    3.   
  
  
  
  3. let source = `var fn = function (n) {  
    4.   
  
  
  
  4.   console.log(111)  
    5.   
  
  
  
  5. }`;  
    6.   
  
  
  
  6. // 解析为 ast  
    7.   
  
  
  
  7. let ast = parser.parse(source, {  
    8.   
  
  
  
  8.   sourceType: "module",  
    9.   
  
  
  
  9.   plugins: ["dynamicImport"]  
    10.   
  
  
  
  10. });  
    11.   
  
  
  
  11. // 打印一下看看，是否正常  
    12.   
  
  
  
  12. console.log(ast); 
    13.

终端执行 node src/index.js 后将会打印如下结果：

这就是 fn 函数对应的 ast，第一步解析完成！

获取当前节点的 AST

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

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

 
 
 
 
      
  
  
  
  1. const parser = require("@babel/parser");  
    2.   
  
  
  
  2. const traverse = require("babel-traverse").default;  
    3.   
  
  
  
  3. // mock 待改造的源码  
    4.   
  
  
  
  4. let source = `var fn = function() {  
    5.   
  
  
  
  5.   console.log(111)  
    6.   
  
  
  
  6. }`; 
    7.   
  
  
  
  7. // 1、解析  
    8.   
  
  
  
  8. let ast = parser.parse(source, {  
    9.   
  
  
  
  9.   sourceType: "module",  
    10.   
  
  
  
  10.   plugins: ["dynamicImport"]  
    11.   
  
  
  
  11. });  
    12.   
  
  
  
  12. // 2、遍历  
    13.   
  
  
  
  13. + traverse(ast, {  
    14.   
  
  
  
  14. +   FunctionExpression(path, state) { // Function 节点  
    15.   
  
  
  
  15. +     // do some stuff  
    16.   
  
  
  
  16. +   },  
    17.   
  
  
  
  17. + }); 
    18.

所有函数表达都会走到 FunctionExpression 中，然后我们可以在里面对其进行修改。

其中参数 path 用于访问到当前的节点信息 path.node，也可以像 DOM 树访问到父节点的方法 path.parent。

修改当前节点的 AST

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

获取函数体内部代码

上面定义的函数是

 
 
 
 
      
  
  
  
  1. var fn = function() {  
    2.   
  
  
  
  2.   console.log(111)  
    3.   
  
  
  
  3. }  
    4.

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

 
 
 
 
      
  
  
  
  1. const parser = require("@babel/parser");  
    2.   
  
  
  
  2. const traverse = require("babel-traverse").default;  
    3.   
  
  
  
  3. // mock 待改造的源码  
    4.   
  
  
  
  4. let source = `var fn = function(n) {  
    5.   
  
  
  
  5.   console.log(111)  
    6.   
  
  
  
  6. }`;  
    7.   
  
  
  
  7. // 1、解析  
    8.   
  
  
  
  8. let ast = parser.parse(source, {  
    9.   
  
  
  
  9.   sourceType: "module",  
    10.   
  
  
  
  10.   plugins: ["dynamicImport"]  
    11.   
  
  
  
  11. });  
    12.   
  
  
  
  12. // 2、遍历  
    13.   
  
  
  
  13. traverse(ast, {  
    14.   
  
  
  
  14.   FunctionExpression(path, state) { // 函数表达式会进入当前方法  
    15.   
  
  
  
  15. +    // 获取函数当前节点信息  
    16.   
  
  
  
  16. +    var node = path.node,  
    17.   
  
  
  
  17. +        params = node.params,  
    18.   
  
  
  
  18. +        blockStatement = node.body,  
    19.   
  
  
  
  19. +        isGenerator = node.generator,  
    20.   
  
  
  
  20. +        isAsync = node.async;  
    21.   
  
  
  
  21. +    // 可以尝试打印看看结果  
    22.   
  
  
  
  22. +    console.log(node, params, blockStatement);  
    23.   
  
  
  
  23.   }，  
    24.   
  
  
  
  24. }); 
    25.

终端执行 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 去生成。

代码如下所示：

 
 
 
 
      
  
  
  
  1. const parser = require("@babel/parser");  
    2.   
  
  
  
  2. const traverse = require("babel-traverse").default;  
    3.   
  
  
  
  3. const t = require("babel-types");  
    4.   
  
  
  
  4. const template = require("@babel/template");  
    5.   
  
  
  
  5. // 0、定义一个待处理的函数（mock）  
    6.   
  
  
  
  6. let source = `var fn = function() {  
    7.   
  
  
  
  7.   console.log(111)  
    8.   
  
  
  
  8. }`;  
    9.   
  
  
  
  9. // 1、解析 
    10.   
  
  
  
  10.  let ast = parser.parse(source, {  
    11.   
  
  
  
  11.   sourceType: "module",  
    12.   
  
  
  
  12.   plugins: ["dynamicImport"]  
    13.   
  
  
  
  13. });  
    14.   
  
  
  
  14. // 2、遍历  
    15.   
  
  
  
  15. traverse(ast, {  
    16.   
  
  
  
  16.   FunctionExpression(path, state) { // Function 节点  
    17.   
  
  
  
  17.     var node = path.node,  
    18.   
  
  
  
  18.         params = node.params,  
    19.   
  
  
  
  19.         blockStatement = node.body, // 函数function内部代码，将函数内部代码块放入 try 节点  
    20.   
  
  
  
  20.         isGenerator = node.generator,  
    21.   
  
  
  
  21.         isAsync = node.async; 
    22.   
  
  
  
  22. +    // 创建 catch 节点中的代码  
    23.   
  
  
  
  23. +    var catchStatement = template.statement(`ErrorCapture(error)`)();  
    24.   
  
  
  
  24. +    var catchClause = t.catchClause(t.identifier('error'),  
    25.   
  
  
  
  25. +          t.blockStatement(  
    26.   
  
  
  
  26. +            [catchStatement] //  catchBody  
    27.   
  
  
  
  27. +          )  
    28.   
  
  
  
  28. +        );  
    29.   
  
  
  
  29. +    // 创建 try/catch 的 ast  
    30.   
  
  
  
  30. +    var ttryStatement = t.tryStatement(blockStatement, catchClause);  
    31.   
  
  
  
  31.   }  
    32.   
  
  
  
  32. }); 
    33.

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

 
 
 
 
      
  
  
  
  1. const parser = require("@babel/parser");  
    2.   
  
  
  
  2. const traverse = require("babel-traverse").default;  
    3.   
  
  
  
  3. const t = require("babel-types");  
    4.   
  
  
  
  4. const template = require("@babel/template");  
    5.   
  
  
  
  5. // 0、定义一个待处理的函数（mock）  
    6.   
  
  
  
  6. let source = `var fn = function() {  
    7.   
  
  
  
  7.   console.log(111)  
    8.   
  
  
  
  8. }`;  
    9.   
  
  
  
  9. // 1、解析  
    10.   
  
  
  
  10. let ast = parser.parse(source, {  
    11.   
  
  
  
  11.   sourceType: "module",  
    12.   
  
  
  
  12.   plugins: ["dynamicImport"]  
    13.   
  
  
  
  13. });  
    14.   
  
  
  
  14. // 2、遍历  
    15.   
  
  
  
  15. traverse(ast, {  
    16.   
  
  
  
  16.   FunctionExpression(path, state) { // Function 节点  
    17.   
  
  
  
  17.       var node = path.node,  
    18.   
  
  
  
  18.           params = node.params,  
    19.   
  
  
  
  19.           blockStatement = node.body, // 函数function内部代码，将函数内部代码块放入 try 节点  
    20.   
  
  
  
  20.           isGenerator = node.generator,  
    21.   
  
  
  
  21.           isAsync = node.async;  
    22.   
  
  
  
  22.       // 创建 catch 节点中的代码  
    23.   
  
  
  
  23.       var catchStatement = template.statement(`ErrorCapture(error)`)();  
    24.   
  
  
  
  24.       var catchClause = t.catchClause(t.identifier('error'),  
    25.   
  
  
  
  25.             t.blockStatement(  
    26.   
  
  
  
  26.               [catchStatement] //  catchBody  
    27.   
  
  
  
  27.             )  
    28.   
  
  
  
  28.           );  
    29.   
  
  
  
  29.       // 创建 try/catch 的 ast 
    30.   
  
  
  
  30.        var ttryStatement = t.tryStatement(blockStatement, catchClause);  
    31.   
  
  
  
  31. +    // 创建新节点  
    32.   
  
  
  
  32. +    var func = t.functionExpression(node.id, params, t.BlockStatement([tryStatement]), isGenerator, isAsync);  
    33.   
  
  
  
  33. +    // 打印看看是否成功  
    34.   
  
  
  
  34. +    console.log('当前节点是:', func);  
    35.   
  
  
  
  35. +    console.log('当前节点下的自节点是:', func.body);  
    36.   
  
  
  
  36.   }  
    37.   
  
  
  
  37. }); 
    38.

此时将上述代码在终端执行 node src/index.js：

可以看到此时我们在一个函数表达式 body 中创建了一个 try 函数（TryStatement）。

最后我们需要将原函数节点进行替换：

 
 
 
 
      
  
  
  
  1. const parser = require("@babel/parser");  
    2.   
  
  
  
  2. const traverse = require("babel-traverse").default;  
    3.   
  
  
  
  3. const t = require("babel-types");  
    4.   
  
  
  
  4. const template = require("@babel/template");  
    5.   
  
  
  
  5. // 0、定义一个待处理的函数（mock）  
    6.   
  
  
  
  6. let source = `var fn = function() {...  
    7.   
  
  
  
  7. // 1、解析  
    8.   
  
  
  
  8. let ast = parser.parse(source, {...  
    9.   
  
  
  
  9. // 2、遍历  
    10.   
  
  
  
  10. traverse(ast, {  
    11.   
  
  
  
  11.   FunctionExpression(path, state) { // Function 节点  
    12.   
  
  
  
  12.       var node = path.node,  
    13.   
  
  
  
  13.           params = node.params,  
    14.   
  
  
  
  14.           blockStatement = node.body, // 函数function内部代码，将函数内部代码块放入 try 节点  
    15.   
  
  
  
  15.           isGenerator = node.generator,  
    16.   
  
  
  
  16.           isAsync = node.async;  
    17.   
  
  
  
  17.       // 创建 catch 节点中的代码  
    18.   
  
  
  
  18.       var catchStatement = template.statement(`ErrorCapture(error)`)();  
    19.   
  
  
  
  19.       var catchClause = t.catchClause(t.identifier('error'),...  
    20.   
  
  
  
  20.       // 创建 try/catch 的 ast  
    21.   
  
  
  
  21.       var ttryStatement = t.tryStatement(blockStatement, catchClause);  
    22.   
  
  
  
  22.       // 创建新节点  
    23.   
  
  
  
  23.       var func = t.functionExpression(node.id, params, t.BlockStatement([tryStatement]), isGenerator, isAsync);    
    24.   
  
  
  
  24.  +    // 替换原节点 
    25.   
  
  
  
  25. +    path.replaceWith(func);  
    26.   
  
  
  
  26.   }  
    27.   
  
  
  
  27. });  
    28.   
  
  
  
  28. + // 将新生成的 AST，转为 Source 源码：  
    29.   
  
  
  
  29. + return core.transformFromAstSync(ast, null, {  
    30.   
  
  
  
  30. +  configFile: false // 屏蔽 babel.config.js，否则会注入 polyfill 使得调试变得困难  
    31.   
  
  
  
  31. + }).code; 
    32.

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

 
 
 
 
      
  
  
  
  1. module.exports = function() {  
    2.   
  
  
  
  2.     //  ... 
    3.   
  
  
  
  3.  }; 
    4.

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

边界条件处理

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

  •  1、如果有 try catch 包裹了
  •  2、防止 circle loops
  •  3、需要 try catch 的只能是语句，像 () => 0 这种的 body
  •  4、如果函数内容小于多少行数

满足以上条件就 return 掉！

代码如下：

 
 
 
 
      
  
  
  
  1. if (blockStatement.body && t.isTryStatement(blockStatement.body[0])  
    2.   
  
  
  
  2.   || !t.isBlockStatement(blockStatement) && !t.isExpressionStatement(blockStatement)  
    3.   
  
  
  
  3.   || blockStatement.body && blockStatement.body.length <= LIMIT_LINE) {  
    4.   
  
  
  
  4.   return;  
    5.   
  
  
  
  5. }  
    6.

最后我们发布到 npm 平台 使用。

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

如何使用

 
 
 
 
      
  
  
  
  1. npm install babel-plugin-function-try-catch 
    2.

webpack 配置

 
 
 
 
      
  
  
  
  1. rules: [{  
    2.   
  
  
  
  2.   test: /\.js$/,  
    3.   
  
  
  
  3.   exclude: /node_modules/,  
    4.   
  
  
  
  4.   use: [  
    5.   
  
  
  
  5. +   "babel-plugin-function-try-catch",  
    6.   
  
  
  
  6.     "babel-loader",  
    7.   
  
  
  
  7.   ]  
    8.   
  
  
  
  8. }] 
    9.

效果见如下图所示：

本文题目：【编译篇】AST实现函数错误的自动上报
网站路径：http://www.gawzjz.com/qtweb/news37/191737.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站营销知识

同城分类信息

微信营销　　 　葆金莱自动门　　 　成都网站建设　　 　成都h5网站建设　　 　广安搬家公司　　 　水泥基自流平　　 　成都网站推广　　 　物流公司网站建设方案　　 　成都广告公司　　 　手机网站制作设计　　 　自适应网站设计　　 　西部信息服务器托管　　 　绵阳梓潼网站建设　　 　重庆花箱　　 　响应式网站建设　　 　成都商城网站建设公司　　 　成都网站建设　　 　益鑫餐饮　　 　微信服务号订阅号开发　　 　名片