AST怎么實現函數錯誤的自動上報功能

本篇內容主要講解“AST怎么實現函數錯誤的自動上報功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“AST怎么實現函數錯誤的自動上報功能”吧!

 前言

之前有身邊有人問我在錯誤監控中，如何能實現自動為函數自動添加錯誤捕獲。今天我們來聊一聊技術如何實現。先講原理：在代碼編譯時，利用 babel 的 loader，劫持所有函數表達。然后利用 AST（抽象語法樹） 修改函數節點，在函數外層包裹 try/catch。然后在 catch 中使用 sdk 將錯誤信息在運行時捕獲上報。如果你對編譯打包感興趣，那么本文就是為你準備的。

本文涉及以下知識點：

•  [x] AST

•  [x] npm 包開發

•  [x] Babel

•  [x] Babel plugin

•  [x] Webpack loader

實現效果

Before 開發環境：

var fn = function(){    console.log('hello');  }

After 線上環境：

var fn = function(){  +  try {      console.log('hello');  +  } catch (error) {  +    // sdk 錯誤上報  +    ErrorCapture(error);  +  }  }

Babel 是什么？

Babel 是JS編譯器，主要用于將 ECMAScript 2015+ 版本的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。

簡單說就是從一種源碼到另一種源碼的編輯器！下面列出的是 Babel 能為你做的事情：

•  語法轉換

•  通過 Polyfill 方式在目標環境中添加缺失的特性 (通過 @babel/polyfill 模塊)

•  源碼轉換 (codemods)

•  其它

Babel 的運行主要分三個階段，請牢記：解析->轉換->生成，后面會用到。

本文我們將會寫一個 Babel plugin 的 npm 包，用于編譯時將代碼進行改造。

babel-plugin 環境搭建

這里我們使用 yeoman 和 generator-babel-plugin 來構建插件的腳手架代碼。安裝：

$ npm i -g yo  $ npm i -g generator-babel-plugin

然后新建文件夾：

$ mkdir babel-plugin-function-try-actch  $ cd babel-plugin-function-try-actch

生成npm包的開發工程：

$ yo babel-plugin

此時項目結構為：

babel-plugin-function-try-catch  ├─.babelrc  ├─.gitignore  ├─.npmignore  ├─.travis.yml  ├─README.md  ├─package-lock.json  ├─package.json  ├─test  |  ├─index.js  |  ├─fixtures  |  |    ├─example  |  |    |    ├─.babelrc  |  |    |    ├─actual.js  |  |    |    └expected.js ├─src  |  └index.js  ├─lib  |  └index.js

這就是我們的 Babel plugin，取名為 babel-loader-function-try-catch（為方便文章閱讀，以下我們統一簡稱為plugin！）。

至此，npm 包環境搭建完畢，代碼地址。

調試 plugin 的 ast

開發工具

本文前面說過 Babel 的運行主要分三個階段：解析->轉換->生成，每個階段 babel 官方提供了核心的 lib：

•  babel-core。Babel 的核心庫，提供了將代碼編譯轉化的能力。

•  babel-types。提供 AST 樹節點的類型。

•  babel-template。可以將普通字符串轉化成 AST，提供更便捷的使用

在 plugin 根目錄安裝需要用到的工具包：

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

打開 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 ttryStatement = 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 ttryStatement = 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 ttryStatement = 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",    ]  }]

效果見如下圖所示：

到此，相信大家對“AST怎么實現函數錯誤的自動上報功能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！