远程日志：ELK 前端日志收集方案

ELK 堆栈（Elasticsearch、Logstash、Kibana）是处理日志的强大工具，但前端日志（如浏览器中的 JavaScript 错误、用户行为数据）需要特殊处理才能集成到 ELK 中。本方案提供一个结构化的、端到端的收集流程，确保日志高效传输、存储和可视化。方案分为四个步骤：前端日志捕获、日志传输、后端处理、ELK 集成。方案基于真实实践，保证可靠性。

方案概述

前端日志收集的核心挑战在于：浏览器环境是分布式的，日志需跨网络发送。标准流程如下：

1. 前端捕获：在浏览器中使用 JavaScript 捕获错误和自定义日志。
2. 日志传输：通过 HTTP API 将日志发送到后端服务。
3. 后端处理：后端接收日志，进行初步处理（如格式化和缓冲）。
4. ELK 集成：日志通过 Logstash 管道进入 Elasticsearch，最终在 Kibana 可视化。

整个方案确保低延迟、高可靠性，并支持大规模应用。以下是详细步骤和代码示例。

步骤 1: 前端日志捕获

在前端（浏览器）中，使用 JavaScript 捕获日志事件，包括：

• 未捕获错误（如 JavaScript 异常）。
• 自定义日志（如用户点击事件、性能指标）。
• 上下文信息（如用户 ID、浏览器类型）。

推荐工具：

• 使用 window.onerror 事件捕获全局错误。
• 集成库如 Sentry 或 log4javascript 简化捕获（这里用原生 JavaScript 示例）。

代码示例：

// 捕获全局错误
window.onerror = function(message, source, lineno, colno, error) {
    const logData = {
        timestamp: new Date().toISOString(),
        level: 'ERROR',
        message: message,
        source: source,
        line: lineno,
        column: colno,
        stack: error ? error.stack : '',
        userAgent: navigator.userAgent,
        // 添加自定义字段，如用户 ID
        userId: localStorage.getItem('userId') || 'anonymous'
    };
    // 调用发送函数
    sendLogToServer(logData);
};

// 自定义日志函数（用于主动记录）
function logCustomEvent(level, message, extra = {}) {
    const logData = {
        timestamp: new Date().toISOString(),
        level: level,
        message: message,
        ...extra
    };
    sendLogToServer(logData);
}

// 示例使用：记录用户点击事件
document.getElementById('button').addEventListener('click', () => {
    logCustomEvent('INFO', 'Button clicked', { buttonId: 'submit-btn' });
});

最佳实践：

• 添加节流机制，避免过多日志淹没网络。
• 在 sendLogToServer 中处理网络错误（如重试逻辑）。
• 使用 try-catch 包裹关键代码块，捕获异步错误。

步骤 2: 日志传输

将捕获的日志从浏览器发送到后端服务器。使用 HTTP POST 请求传输 JSON 格式数据，确保高效和兼容性。

代码示例：

// 发送日志到后端 API
function sendLogToServer(logData) {
    const apiUrl = 'https://your-backend-domain.com/api/logs'; // 替换为实际后端端点
    fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(logData)
    })
    .then(response => {
        if (!response.ok) {
            console.error('Log send failed:', response.status);
            // 可选：本地存储失败日志，稍后重试
        }
    })
    .catch(error => {
        console.error('Network error:', error);
    });
}

最佳实践：

• 使用 HTTPS 保证安全。
• 添加批量发送：累积多条日志后一次性发送，减少请求数（例如，使用 setInterval 定时发送缓冲日志）。
• 设置超时和重试策略（如最多 3 次重试）。

步骤 3: 后端处理

后端服务接收前端日志，进行预处理（如验证、格式标准化），然后转发到 Logstash。推荐使用轻量级框架如 Node.js 或 Python Flask。

代码示例（Node.js 使用 Express）：

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

// 接收日志的 API 端点
app.post('/api/logs', (req, res) => {
    const logData = req.body;
    // 基本验证
    if (!logData.timestamp || !logData.message) {
        return res.status(400).send('Invalid log format');
    }
    // 添加后端元数据（如服务器时间）
    logData.serverTimestamp = new Date().toISOString();
    // 转发到 Logstash（这里使用 HTTP 输出）
    forwardToLogstash(logData);
    res.status(200).send('Log received');
});

// 转发到 Logstash
function forwardToLogstash(data) {
    const logstashUrl = 'http://logstash-host:5044'; // Logstash HTTP 输入地址
    fetch(logstashUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    }).catch(err => {
        console.error('Logstash forward error:', err);
        // 可选：写入本地文件作为备份
    });
}

app.listen(port, () => {
    console.log(`Backend server running on port ${port}`);
});

最佳实践：

• 添加速率限制（如使用 express-rate-limit）防止 DDoS 攻击。
• 使用队列系统（如 Redis 或 Kafka）缓冲日志，避免 Logstash 过载。
• 在转发前过滤敏感数据（如移除用户密码字段）。

步骤 4: ELK 集成

配置 Logstash 处理日志，存储到 Elasticsearch，并通过 Kibana 可视化。Logstash 管道负责解析、丰富和索引日志。

Logstash 配置文件示例 (frontend-logs.conf)：

input {
  http {
    port => 5044 # 与后端转发的端口一致
  }
}

filter {
  # 解析 JSON 日志
  json {
    source => "message"
  }
  # 添加字段（如日志来源）
  mutate {
    add_field => { "log_source" => "frontend" }
  }
  # 处理时间戳
  date {
    match => ["timestamp", "ISO8601"]
  }
  # 可选：基于错误级别添加标签
  if [level] == "ERROR" {
    mutate {
      add_tag => ["critical"]
    }
  }
}

output {
  elasticsearch {
    hosts => ["http://elasticsearch:9200"] # Elasticsearch 地址
    index => "frontend-logs-%{+YYYY.MM.dd}" # 按日期滚动索引
  }
  # 可选：输出到文件用于调试
  file {
    path => "/var/log/logstash/frontend-debug.log"
  }
}

Kibana 配置：

1. 在 Kibana 中创建索引模式（如 frontend-logs-*）。
2. 构建仪表板：
   • 错误率图表：按时间统计 ERROR 级别日志。
   • 地理分布：基于用户 IP（需后端添加 IP 字段）。
   • 自定义查询：搜索特定用户 ID 或错误消息。

最佳实践：

• 在 Elasticsearch 中设置索引生命周期管理（ILM），自动删除旧日志。
• 使用 Kibana Alerting 设置告警（如错误率突增时通知）。
• 监控 ELK 堆栈性能，确保资源充足。

总结

本方案提供了一套完整的 ELK 前端日志收集流程：

• 前端：JavaScript 捕获错误和事件，HTTP 发送到后端。
• 后端：Node.js 服务接收并转发到 Logstash。
• ELK：Logstash 处理日志，Elasticsearch 存储，Kibana 可视化。

优势：

• 实时性：日志可在秒级内出现在 Kibana。
• 可扩展：支持从单页应用到大型网站。
• 安全：通过 HTTPS 和验证机制保护数据。

潜在优化：

• 在大型系统中，引入 Filebeat 替代直接 HTTP 传输，提升可靠性。
• 使用云服务（如 AWS Kinesis）处理高吞吐量日志。
• 结合 APM 工具（如 Elastic APM）进行更深入的性能分析。

如果您有具体环境细节（如云平台或框架），我可以进一步调整方案！