【編譯篇】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?。?/p>
至此，npm 包環境搭建完畢，代碼地址。
調試 plugin 的 ast
開發工具
本文前面說過 Babel 的運行主要分三個階段：解析->轉換->生成，每個階段 babel 官方提供了核心的 lib：
- babel-core。Babel 的核心庫，提供了將代碼編譯轉化的能力。
- babel-types。提供 AST 樹節點的類型。
- babel-template?？梢詫⑵胀ㄗ址D化成 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",
- ]
- }]
效果見如下圖所示：
