Ubuntu JS日志中如何追踪用户行为

Ubuntu 环境下追踪 JS 用户行为的落地方案

一架构与采集要点

前端埋点与日志格式：在浏览器端封装统一的 Logger，按级别输出结构化日志（如 JSON），包含 timestamp、level、userId/page/sessionId、action、element、url、ua、referrer、duration 等；对页面可见性、点击、输入、路由变化、表单提交等自动采集；页面卸载时用 navigator.sendBeacon 可靠上报，必要时做批量上报与节流；遵循 Do Not Track，避免采集敏感信息（如密码、身份证），对 IP/用户标识 做脱敏与最小化收集。
服务端记录与输出：Node.js 使用 winston/pino/morgan 输出结构化日志到文件或标准输出；服务端日志建议包含 requestId、userId/sessionId、ip、ua、method、url、status、duration、referer 等，便于与前端日志串联；为长期运行准备日志轮转与保留策略（如按日轮转、保留 7–14 天）。
传输与存储：开发/测试阶段可落盘与控制台并行；生产环境建议接入 ELK（Elasticsearch + Logstash + Kibana） 或 EFK（Elasticsearch + Fluentd + Kibana） 做集中采集、解析、检索与可视化；如运行在 systemd 下，亦可用 journald 收集服务日志并配合文件日志使用。

二 Ubuntu 端日志采集与监控

实时查看与检索：使用 tail -f /path/to/app.log 实时跟踪日志；用 grep ‘keyword’ 检索关键事件；用 watch -n 5 ‘grep …’ 定时巡检；对 Node/前端服务，结合 journalctl -u your-service-name -f 查看服务日志流。
日志轮转与维护：Node 侧用 winston-daily-rotate-file 做按日/按大小轮转；系统侧可用 logrotate 管理历史文件，避免磁盘被占满。
集中式收集：使用 Logstash/Fluentd/Graylog 汇聚多实例日志，统一解析与转发到 Elasticsearch，在 Kibana 建立仪表盘（如活跃用户、热门页面、转化漏斗、错误分布、会话时长）。

三快速实现示例

前端埋点与上报（浏览器）

// logger.js
const Logger = {
  levels: { debug: 0, info: 1, warn: 2, error: 3 },
  currentLevel: 1,
  sessionId: sessionStorage.getItem('sessionId') || (crypto.randomUUID?.() ?? Date.now().toString()),
  init() {
    if (!sessionStorage.getItem('sessionId')) sessionStorage.setItem('sessionId', this.sessionId);
  },
  log(level, message, data = {}) {
    if (this.levels[level] < this.levels[this.currentLevel]) return;
    const entry = {
      timestamp: new Date().toISOString(),
      level,
      sessionId: this.sessionId,
      page: location.pathname,
      url: location.href,
      referrer: document.referrer,
      ua: navigator.userAgent,
      action: message,
      ...data
    };
    // 开发环境控制台输出
    if (process.env.NODE_ENV !== 'production') console[level](entry);
    // 生产环境可靠上报
    if (navigator.sendBeacon) {
      navigator.sendBeacon('/api/log', JSON.stringify(entry));
    } else {
      fetch('/api/log', { method: 'POST', body: JSON.stringify(entry), keepalive: true }).catch(() => {});
    }
  },
  info: (m, d) => this.log('info', m, d),
  warn: (m, d) => this.log('warn', m, d),
  error: (m, d) => this.log('error', m, d)
};
Logger.init();

// 自动采集示例
document.addEventListener('click', (e) => {
  Logger.info('click', {
    tagName: e.target.tagName, id: e.target.id, className: e.target.className,
    text: (e.target.innerText || '').trim().slice(0, 100),
    xpath: getXPath(e.target)
  });
});

function getXPath(el) {
  if (el.id) return `//*[@id="${el.id}"]`;
  if (el === document.body) return '/html/body';
  let ix = 0;
  const sibs = el.parentNode?.childNodes || [];
  for (let i = 0; i < sibs.length; i++) {
    const s = sibs[i];
    if (s === el) return `${getXPath(el.parentNode)}/${el.tagName}[${ix + 1}]`;
    if (s.nodeType === 1 && s.tagName === el.tagName) ix++;
  }
  return '';
}

服务端记录（Node.js + Express + winston）

// server.js
const express = require('express');
const morgan = require('morgan');
const { createLogger, format, transports } = require('winston');
require('winston-daily-rotate-file');

const logger = createLogger({
  level: 'info',
  format: format.combine(format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }), format.json()),
  transports: [
    new transports.File({ filename: 'error.log', level: 'error' }),
    new DailyRotateFile({
      filename: 'app-%DATE%.log', datePattern: 'YYYY-MM-DD', zippedArchive: true,
      maxSize: '20m', maxFiles: '14d'
    }),
    new transports.Console({ format: format.simple() })
  ]
});

const app = express();
app.use(express.json({ limit: '10kb' }));
app.use(morgan('combined', { stream: { write: msg => logger.info(msg.trim()) } }));

app.post('/api/log', (req, res) => {
  // 简单校验示例：{ sessionId, action, page, ... }
  if (!req.body || !req.body.sessionId || !req.body.action) {
    return res.status(400).send('bad request');
  }
  // 服务端补充字段
  const entry = {
    ...req.body,
    ip: req.ip || req.headers['x-forwarded-for'] || '-',
    ua: req.headers['user-agent'] || '-',
    receivedAt: new Date().toISOString()
  };
  logger.info('frontend_log', entry);
  res.status(204).end();
});

app.listen(3000, () => logger.info('server listening on :3000'));

运行与观测
- 启动服务后，在 Ubuntu 终端实时查看：tail -f app-*.log；或用 journalctl -u your-service-name -f 观察服务日志。
- 在 Kibana 建立索引模式（如 logstash-* 或 app-*），创建可视化：按 sessionId 统计会话数、按 action/page 统计点击与访问、按 level 统计错误、按 ip/ua 做分布与趋势。

四分析与可视化

命令行快速洞察：统计访问量 Top N（示例以 Nginx 访问日志的客户端 IP 列为例）

awk '{print $1}' access.log | sort | uniq -c | sort -nr | head -20

会话与转化：以 sessionId 分组重建用户事件序列，计算页面停留时长、关键步骤转化漏斗、错误前后路径；在 Kibana 构建仪表盘展示活跃用户、热门页面、转化漏斗、错误分布、会话时长与活跃时段。

五合规与性能建议

最小化与脱敏：不采集 密码/身份证/银行卡 等敏感信息；对 IP、邮箱、手机号 做脱敏或哈希；提供明显的 拒绝/关闭追踪 开关并尊重 Do Not Track。
可靠性与性能：页面卸载优先用 sendBeacon；高频事件做 节流/防抖 与 批量上报；避免同步阻塞；为日志设置合理 采样率 与 保留期；对日志字段建立索引以优化查询性能。

最新问答

相关标签