Automating Log Insertion in Frontend Projects with a Custom Babel Plugin

As a developer, logs are essential for debugging and analyzing user behavior. This article describes the challenges faced in a live PC streaming project due to insufficient and inconsistent logging.

To address these issues, the team combined Sentry, Sensors Analytics and electron‑log, but manual insertion proved unsustainable. They turned to Babel to automate log instrumentation.

Babel is a JavaScript compiler that can transform ES6 to ES5 and provides a plugin system that operates on the abstract syntax tree (AST). By writing a custom Babel plugin, the author traverses the AST and inserts console.info statements at strategic locations: method entry, conditional branches, and return statements.

The plugin implements visitors for IfStatement , FunctionDeclaration , FunctionExpression , ArrowFunctionExpression , ClassMethod , and ObjectMethod . For IfStatement it logs the condition and whether the true or false branch returns. For functions it logs the function name, parameters and file path.

After the Babel transformation, a global Proxy replaces the native console object. The proxy forwards info logs to the local file and error / warn logs to both the local file and a remote server (e.g., Sentry), avoiding recursive calls.

The resulting plugin automatically added thousands of log statements to the codebase, eliminated manual errors, and made debugging faster. The author also notes pitfalls such as source‑map configuration for Sentry, handling complex parameter types, avoiding excessive logging, and preventing console recursion.

Finally, the plugin has been packaged as @thinkacademy/babel-plugin-log and published to the company’s npm registry for others to review and use.

{
  "plugins": ["@thinkacademy/babel-plugin-log"]
}

// index.js (excerpt)
module.exports = function (babel) {
  let types = babel.types;
  let template = babel.template;
  const visitor = {
    IfStatement(path) {
      // convert condition to string
      const ifName = generator(path.node.test).code.split('"').join("'");
      if (path.node.consequent.type === "ReturnStatement") {
        const temp = template(`console.info("if(${ifName})为true触发return,path: ${filePath}")`);
        const logNode = temp();
        const statements = [logNode];
        statements.push(path.node.consequent);
        path.node.consequent = types.blockStatement(statements);
      } else {
        // handle BlockStatement and else branch similarly
      }
    },
    FunctionDeclaration(path) {
      let filePath = this.filename || this.file.opts.filename || "unknown";
      let paramsArr = path.node.params.map(param => {
        if (param.name) return param.name;
        if (!param.name && param.left) return param.left.name;
        if (!param.name && param.properties) return param.properties.map(node => node.key.name);
        if (!param.name && param.elements) return param.elements.map(node => node.name);
        if (param.type === "RestElement") return param.argument.name;
      }).flat();
      let paramsStr = paramsArr.join(", ");
      let temp;
      if (path.node.id) {
        const funcName = path.node.id.name || null;
        if (paramsStr) {
          temp = template(`console.info('函数申明 ${funcName}(${paramsStr})',${paramsStr},'filePath:${filePath}')`);
        } else {
          temp = template(`console.info('函数申明 ${funcName}, filePath:${filePath}')`);
        }
      } else {
        if (paramsStr) {
          temp = template(`console.info('函数申明 (${paramsStr})',${paramsStr},'filePath:${filePath}')`);
        } else {
          temp = template(`console.info('函数申明 (), filePath:${filePath}')`);
        }
      }
      const logNode = temp();
      path.node.body.body.unshift(logNode);
    }
    // other visitors omitted for brevity
  };
  return { visitor };
};

// console proxy example
const oldConsole = window.console;
window.console = new Proxy(oldConsole, {
  get(target, key) {
    if (key === "info") {
      return function (...args) {
        // write to local log
        target[key](...args);
      };
    }
    if (key === "error" || key === "warn") {
      return function (...args) {
        // upload to server, write to local log
        target[key](...args);
      };
    }
    return target[key];
  }
});