如何将React客户端控制台日志存储到服务器及相关实现问题

1. 客户端日志捕获 #

重写浏览器原生console方法，在保留原有输出功能的同时，捕获日志内容并格式化存储：

// 备份原生console方法
const originalConsole = { ...console };
const logs = [];

// 覆盖常用日志方法：log/error/warn/info
['log', 'error', 'warn', 'info'].forEach(method => {
  console[method] = (...args) => {
    // 保留原控制台输出
    originalConsole[method](...args);
    // 生成带唯一标识的日志条目
    const logEntry = {
      id: `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`, // 确保ID唯一
      timestamp: new Date().toISOString(),
      type: method,
      content: args.map(item => typeof item === 'object' ? JSON.stringify(item) : String(item)).join(' ')
    };
    logs.push(logEntry);
    saveLogsToLocal();
    checkSendThreshold(); // 触发阈值检查
  };
});

2. 本地存储与去重机制 #

使用localStorage（轻量场景）或IndexedDB（大量日志场景）存储未发送日志，同时维护已发送日志ID集合实现去重：

// 保存未发送日志到本地
function saveLogsToLocal() {
  localStorage.setItem('unsentLogs', JSON.stringify(logs));
}

// 获取待发送的未上传日志
function getUnsentLogs() {
  const unsent = JSON.parse(localStorage.getItem('unsentLogs')) || [];
  const sentIds = JSON.parse(localStorage.getItem('sentLogIds')) || [];
  // 过滤掉已发送的日志
  return unsent.filter(log => !sentIds.includes(log.id));
}

// 标记日志为已发送，并清理本地已上传日志
function markAsSent(logIds) {
  const sentIds = [...new Set([...(JSON.parse(localStorage.getItem('sentLogIds')) || []), ...logIds])];
  localStorage.setItem('sentLogIds', JSON.stringify(sentIds));
  // 本地只保留未发送日志
  localStorage.setItem('unsentLogs', JSON.stringify(getUnsentLogs()));
}

3. 日志发送策略（频率控制） #

采用多策略结合的方式平衡实时性与请求效率：

定时发送 #

设置固定间隔（如5分钟）检查并发送未上传日志：

// 每5分钟执行一次日志发送检查
setInterval(async () => {
  const unsent = getUnsentLogs();
  if (unsent.length > 0) await sendLogs(unsent);
}, 5 * 60 * 1000);

阈值触发 #

当未发送日志积累到指定数量（如20条）时立即发送：

function checkSendThreshold() {
  const unsent = getUnsentLogs();
  if (unsent.length >= 20) sendLogs(unsent);
}

页面卸载时发送 #

利用navigator.sendBeacon保证页面关闭/刷新时，未发送日志能被成功提交：

window.addEventListener('beforeunload', () => {
  const unsent = getUnsentLogs();
  if (unsent.length > 0) {
    navigator.sendBeacon('/api/client-logs', JSON.stringify(unsent));
    markAsSent(unsent.map(log => log.id));
  }
});

4. 日志发送与异常处理 #

确保请求失败时不标记日志为已发送，留待下次重试：

async function sendLogs(logs) {
  try {
    const res = await fetch('/api/client-logs', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(logs)
    });
    if (res.ok) {
      markAsSent(logs.map(log => log.id));
    } else {
      throw new Error('服务器响应异常');
    }
  } catch (err) {
    console.error('日志发送失败:', err);
    // 不标记为已发送，后续继续尝试
  }
}

5. 服务器端接收示例（Node.js/Express） #

提供接口接收客户端日志并持久化存储：

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const app = express();

app.use(bodyParser.json());

app.post('/api/client-logs', (req, res) => {
  const logs = req.body;
  // 可替换为存储到MongoDB/MySQL等数据库
  const logContent = logs.map(log => `${log.timestamp} [${log.type}] ${log.content}`).join('\n');
  fs.appendFile('./client-logs.txt', logContent + '\n', (err) => {
    if (err) {
      console.error('日志存储失败:', err);
      res.status(500).send('存储失败');
    } else {
      res.status(200).send('日志接收成功');
    }
  });
});

app.listen(3000, () => console.log('日志服务运行在3000端口'));

内容的提问来源于stack exchange，提问作者Ajay Shivanagol