【編譯篇】AST實(shí)現(xiàn)函數(shù)錯(cuò)誤的自動(dòng)上報(bào)
前言
之前有身邊有人問(wèn)我在錯(cuò)誤監(jiān)控中，如何能實(shí)現(xiàn)自動(dòng)為函數(shù)自動(dòng)添加錯(cuò)誤捕獲。今天我們來(lái)聊一聊技術(shù)如何實(shí)現(xiàn)。先講原理：在代碼編譯時(shí)，利用 babel 的 loader，劫持所有函數(shù)表達(dá)。然后利用 AST（抽象語(yǔ)法樹(shù)） 修改函數(shù)節(jié)點(diǎn)，在函數(shù)外層包裹 try/catch。然后在 catch 中使用 sdk 將錯(cuò)誤信息在運(yùn)行時(shí)捕獲上報(bào)。如果你對(duì)編譯打包感興趣，那么本文就是為你準(zhǔn)備的。
本文涉及以下知識(shí)點(diǎn)：
- [x] AST
- [x] npm 包開(kāi)發(fā)
- [x] Babel
- [x] Babel plugin
- [x] Webpack loader
實(shí)現(xiàn)效果
Before 開(kāi)發(fā)環(huán)境：
- var fn = function(){
- console.log('hello');
- }
After 線(xiàn)上環(huán)境：
- var fn = function(){
- + try {
- console.log('hello');
- + } catch (error) {
- + // sdk 錯(cuò)誤上報(bào)
- + ErrorCapture(error);
- + }
- }
Babel 是什么？
Babel 是JS編譯器，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。
簡(jiǎn)單說(shuō)就是從一種源碼到另一種源碼的編輯器！下面列出的是 Babel 能為你做的事情：
- 語(yǔ)法轉(zhuǎn)換
- 通過(guò) Polyfill 方式在目標(biāo)環(huán)境中添加缺失的特性 (通過(guò) @babel/polyfill 模塊)
- 源碼轉(zhuǎn)換 (codemods)
- 其它
Babel 的運(yùn)行主要分三個(gè)階段，請(qǐng)牢記：解析->轉(zhuǎn)換->生成，后面會(huì)用到。
本文我們將會(huì)寫(xiě)一個(gè) Babel plugin 的 npm 包，用于編譯時(shí)將代碼進(jìn)行改造。
babel-plugin 環(huán)境搭建
這里我們使用 yeoman 和 generator-babel-plugin 來(lái)構(gòu)建插件的腳手架代碼。安裝：
- $ npm i -g yo
- $ npm i -g generator-babel-plugin
然后新建文件夾：
- $ mkdir babel-plugin-function-try-actch
- $ cd babel-plugin-function-try-actch
生成npm包的開(kāi)發(fā)工程：
- $ yo babel-plugin
此時(shí)項(xiàng)目結(jié)構(gòu)為：
- 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（為方便文章閱讀，以下我們統(tǒng)一簡(jiǎn)稱(chēng)為plugin！）。
至此，npm 包環(huán)境搭建完畢，代碼地址。
調(diào)試 plugin 的 ast
開(kāi)發(fā)工具
本文前面說(shuō)過(guò) Babel 的運(yùn)行主要分三個(gè)階段：解析->轉(zhuǎn)換->生成，每個(gè)階段 babel 官方提供了核心的 lib：
- babel-core。Babel 的核心庫(kù)，提供了將代碼編譯轉(zhuǎn)化的能力。
- babel-types。提供 AST 樹(shù)節(jié)點(diǎn)的類(lèi)型。
- babel-template。可以將普通字符串轉(zhuǎn)化成 AST，提供更便捷的使用
在 plugin 根目錄安裝需要用到的工具包：
- npm i @babel/core @babel/parser babel-traverse @babel/template babel-types -S
打開(kāi) plugin 的 src/index.js 編輯：
- const parser = require("@babel/parser");
- // 先來(lái)定義一個(gè)簡(jiǎn)單的函數(shù)
- let source = `var fn = function (n) {
- console.log(111)
- }`;
- // 解析為 ast
- let ast = parser.parse(source, {
- sourceType: "module",
- plugins: ["dynamicImport"]
- });
- // 打印一下看看，是否正常
- console.log(ast);
終端執(zhí)行 node src/index.js 后將會(huì)打印如下結(jié)果：
這就是 fn 函數(shù)對(duì)應(yīng)的 ast，第一步解析完成！
獲取當(dāng)前節(jié)點(diǎn)的 AST
然后我們使用 babel-traverse 去遍歷對(duì)應(yīng)的 AST 節(jié)點(diǎn)，我們想要尋找所有的 function 表達(dá)可以寫(xiě)在 FunctionExpression 中：
打開(kāi) 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 節(jié)點(diǎn)
- + // do some stuff
- + },
- + });
所有函數(shù)表達(dá)都會(huì)走到 FunctionExpression 中，然后我們可以在里面對(duì)其進(jìn)行修改。
其中參數(shù) path 用于訪(fǎng)問(wèn)到當(dāng)前的節(jié)點(diǎn)信息 path.node，也可以像 DOM 樹(shù)訪(fǎng)問(wèn)到父節(jié)點(diǎn)的方法 path.parent。
修改當(dāng)前節(jié)點(diǎn)的 AST
好了，接下來(lái)要做的是在 FunctionExpression 中去劫持函數(shù)的內(nèi)部代碼，然后將其放入 try 函數(shù)內(nèi)，并且在 catch 內(nèi)加入錯(cuò)誤上報(bào) sdk 的代碼段。
獲取函數(shù)體內(nèi)部代碼
上面定義的函數(shù)是
- var fn = function() {
- console.log(111)
- }
那么函數(shù)內(nèi)部的代碼塊就是 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) { // 函數(shù)表達(dá)式會(huì)進(jìn)入當(dāng)前方法
- + // 獲取函數(shù)當(dāng)前節(jié)點(diǎn)信息
- + var node = path.node,
- + params = node.params,
- + blockStatement = node.body,
- + isGenerator = node.generator,
- + isAsync = node.async;
- + // 可以嘗試打印看看結(jié)果
- + console.log(node, params, blockStatement);
- }，
- });
終端執(zhí)行 node src/index.js，可以打印看到當(dāng)前函數(shù)的 AST 節(jié)點(diǎn)信息。
創(chuàng)建 try/catch 節(jié)點(diǎn)（兩步驟）
創(chuàng)建一個(gè)新的節(jié)點(diǎn)可能會(huì)稍微陌（fu）生（za）一點(diǎn)，不過(guò)我已經(jīng)為大家總結(jié)了我個(gè)人的經(jīng)驗(yàn)（僅供參考）。首先需要知道當(dāng)前新增代碼段它的聲明是什么，然后使用 @babel-types 去創(chuàng)建即可。
第一步：
那么我們?nèi)绾沃浪谋磉_(dá)聲明type是什么呢？這里我們可以 使用 astexplorer 查找它在 AST 中 type 的表達(dá)。
如上截圖得知，try/catch 在 AST 中的 type 就是 TryStatement！
第二步：
然后去 @babel-types 官方文檔查找對(duì)應(yīng)方法，根據(jù) API 文檔來(lái)創(chuàng)建即可。
如文檔所示，創(chuàng)建一個(gè) try/catch 的方式使用 t.tryStatement(block, handler, finalizer)。
創(chuàng)建新的ast節(jié)點(diǎn)一句話(huà)總結(jié)：使用 astexplorer 查找你要生成的代碼的 type，再根據(jù) type 在 @babel-types 文檔查找對(duì)應(yīng)的使用方法使用即可！
那么創(chuàng)建 try/catch 只需要使用 t.tryStatement(try代碼塊, catch代碼塊) 即可。
- try代碼塊 表示 try 中的函數(shù)代碼塊，即原先函數(shù) body 內(nèi)的代碼 console.log(111)，可以直接用 path.node.body 獲取；
- catch代碼塊 表示 catch 代碼塊，即我們想要去改造進(jìn)行錯(cuò)誤收集上報(bào)的 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、定義一個(gè)待處理的函數(shù)（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 節(jié)點(diǎn)
- var node = path.node,
- params = node.params,
- blockStatement = node.body, // 函數(shù)function內(nèi)部代碼，將函數(shù)內(nèi)部代碼塊放入 try 節(jié)點(diǎn)
- isGenerator = node.generator,
- isAsync = node.async;
- + // 創(chuàng)建 catch 節(jié)點(diǎn)中的代碼
- + var catchStatement = template.statement(`ErrorCapture(error)`)();
- + var catchClause = t.catchClause(t.identifier('error'),
- + t.blockStatement(
- + [catchStatement] // catchBody
- + )
- + );
- + // 創(chuàng)建 try/catch 的 ast
- + var ttryStatement = t.tryStatement(blockStatement, catchClause);
- }
- });
創(chuàng)建新函數(shù)節(jié)點(diǎn)，并將上面定義好的 try/catch 塞入函數(shù)體：
- const parser = require("@babel/parser");
- const traverse = require("babel-traverse").default;
- const t = require("babel-types");
- const template = require("@babel/template");
- // 0、定義一個(gè)待處理的函數(shù)（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 節(jié)點(diǎn)
- var node = path.node,
- params = node.params,
- blockStatement = node.body, // 函數(shù)function內(nèi)部代碼，將函數(shù)內(nèi)部代碼塊放入 try 節(jié)點(diǎn)
- isGenerator = node.generator,
- isAsync = node.async;
- // 創(chuàng)建 catch 節(jié)點(diǎn)中的代碼
- var catchStatement = template.statement(`ErrorCapture(error)`)();
- var catchClause = t.catchClause(t.identifier('error'),
- t.blockStatement(
- [catchStatement] // catchBody
- )
- );
- // 創(chuàng)建 try/catch 的 ast
- var ttryStatement = t.tryStatement(blockStatement, catchClause);
- + // 創(chuàng)建新節(jié)點(diǎn)
- + var func = t.functionExpression(node.id, params, t.BlockStatement([tryStatement]), isGenerator, isAsync);
- + // 打印看看是否成功
- + console.log('當(dāng)前節(jié)點(diǎn)是:', func);
- + console.log('當(dāng)前節(jié)點(diǎn)下的自節(jié)點(diǎn)是:', func.body);
- }
- });
此時(shí)將上述代碼在終端執(zhí)行 node src/index.js：
可以看到此時(shí)我們?cè)谝粋€(gè)函數(shù)表達(dá)式 body 中創(chuàng)建了一個(gè) try 函數(shù)（TryStatement）。
最后我們需要將原函數(shù)節(jié)點(diǎn)進(jìn)行替換：
- const parser = require("@babel/parser");
- const traverse = require("babel-traverse").default;
- const t = require("babel-types");
- const template = require("@babel/template");
- // 0、定義一個(gè)待處理的函數(shù)（mock）
- let source = `var fn = function() {...
- // 1、解析
- let ast = parser.parse(source, {...
- // 2、遍歷
- traverse(ast, {
- FunctionExpression(path, state) { // Function 節(jié)點(diǎn)
- var node = path.node,
- params = node.params,
- blockStatement = node.body, // 函數(shù)function內(nèi)部代碼，將函數(shù)內(nèi)部代碼塊放入 try 節(jié)點(diǎn)
- isGenerator = node.generator,
- isAsync = node.async;
- // 創(chuàng)建 catch 節(jié)點(diǎn)中的代碼
- var catchStatement = template.statement(`ErrorCapture(error)`)();
- var catchClause = t.catchClause(t.identifier('error'),...
- // 創(chuàng)建 try/catch 的 ast
- var ttryStatement = t.tryStatement(blockStatement, catchClause);
- // 創(chuàng)建新節(jié)點(diǎn)
- var func = t.functionExpression(node.id, params, t.BlockStatement([tryStatement]), isGenerator, isAsync);
- + // 替換原節(jié)點(diǎn)
- + path.replaceWith(func);
- }
- });
- + // 將新生成的 AST，轉(zhuǎn)為 Source 源碼：
- + return core.transformFromAstSync(ast, null, {
- + configFile: false // 屏蔽 babel.config.js，否則會(huì)注入 polyfill 使得調(diào)試變得困難
- + }).code;
“A loader is a node module exporting a function”，也就是說(shuō)一個(gè) loader 就是一個(gè)暴露出去的 node 模塊，既然是一個(gè)node module，也就基本可以寫(xiě)成下面的樣子:
- module.exports = function() {
- // ...
- };
再編輯 src/index.js 為如下截圖：
邊界條件處理
我們并不需要為所有的函數(shù)都增加 try/catch，所有我們還得處理一些邊界條件。
- 1、如果有 try catch 包裹了
- 2、防止 circle loops
- 3、需要 try catch 的只能是語(yǔ)句，像 () => 0 這種的 body
- 4、如果函數(shù)內(nèi)容小于多少行數(shù)
滿(mǎn)足以上條件就 return 掉！
代碼如下：
- if (blockStatement.body && t.isTryStatement(blockStatement.body[0])
- || !t.isBlockStatement(blockStatement) && !t.isExpressionStatement(blockStatement)
- || blockStatement.body && blockStatement.body.length <= LIMIT_LINE) {
- return;
- }
最后我們發(fā)布到 npm 平臺(tái) 使用。
由于篇幅過(guò)長(zhǎng)不易閱讀，本文特別的省略了本地調(diào)試過(guò)程，所以需要調(diào)試請(qǐng)移步 [【利用AST自動(dòng)為函數(shù)增加錯(cuò)誤上報(bào)-續(xù)集】有關(guān) npm 包的本地開(kāi)發(fā)和調(diào)試]()。
如何使用
- npm install babel-plugin-function-try-catch
webpack 配置
- rules: [{
- test: /\.js$/,
- exclude: /node_modules/,
- use: [
- + "babel-plugin-function-try-catch",
- "babel-loader",
- ]
- }]
效果見(jiàn)如下圖所示：
