【編譯篇】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)
}`;

// 一、解析
let ast = parser.parse(source, {
  sourceType: "module",
  plugins: ["dynamicImport"]
});

// 二、遍歷
+ 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)
}`;

// 一、解析
let ast = parser.parse(source, {
  sourceType: "module",
  plugins: ["dynamicImport"]
});

// 二、遍歷
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)
}`;

// 一、解析
let ast = parser.parse(source, {
  sourceType: "module",
  plugins: ["dynamicImport"]
});

// 二、遍歷
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)
}`;

// 一、解析
let ast = parser.parse(source, {
  sourceType: "module",
  plugins: ["dynamicImport"]
});

// 二、遍歷
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() {...

// 一、解析
let ast = parser.parse(source, {...

// 二、遍歷
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，全部咱們還得處理一些邊界條件。

• 一、若是有 try catch 包裹了
• 二、防止 circle loops
• 三、須要 try catch 的只能是語句，像 () => 0 這種的 body
• 四、若是函數內容小於多少行數

知足以上條件就 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 包的本地開發和調試

更多 AST 相關請關注後面分享，謝謝。

Reference：

完整代碼地址請點擊

Babel 插件手冊點擊