JavaScript日志记录与行为分析技巧

const Logger = {
  levels: { debug: 0, info: 1, warn: 2, error: 3 },
  currentLevel: 1,

  log(level, message, data) {
    if (this.levels[level] >= this.currentLevel) {
      const timestamp = new Date().toISOString();
      const logEntry = { level, message, data, timestamp };

      // 开发环境打印到控制台
      if (process.env.NODE_ENV !== 'production') {
        console[level](`${timestamp} [${level.toUpperCase()}] ${message}`, data);
      }

      // 生产环境可选择上报到服务器
      this.sendToServer(logEntry);
    }
  },

  debug(msg, data) { this.log('debug', msg, data); },
  info(msg, data)  { this.log('info',  msg, data); },
  warn(msg, data)  { this.log('warn',  msg, data); },
  error(msg, data) { this.log('error', msg, data); },

  sendToServer(entry) {
    navigator.sendBeacon && navigator.sendBeacon('/api/log', JSON.stringify(entry));
  }
};

document.addEventListener('click', (e) => {
  const target = e.target;
  Logger.info('user_click', {
    tagName: target.tagName,
    className: target.className,
    id: target.id,
    text: target.innerText?.trim().substring(0, 100),
    xpath: getXPath(target)
  });
});

// 辅助函数：生成元素XPath（简化版）
function getXPath(el) {
  if (el.id) return `//*[@id="${el.id}"]`;
  if (el === document.body) return '/html/body';
  let ix = 0;
  const siblings = el.parentNode?.childNodes || [];
  for (let i = 0; i