React中使用自定义日志模块报错：TypeError: _fs.default.existsSync is not a function

这个问题的核心原因其实很直白：你用到的fs模块是Node.js专属的核心文件系统模块，它只能在Node.js环境里运行——比如你单独启动日志模块时的环境，但React客户端是跑在浏览器里的，浏览器根本没有这个模块，自然找不到existsSync这类文件操作方法，所以才会抛出这个错误。

下面给你几个实用的解决方案，按需选择：

方案1：把文件日志逻辑迁移到后端（最推荐） #

前端本来就不应该负责写文件操作，最合理的做法是把日志记录的工作交给后端服务：

• 前端只需要收集Ajax请求的日志数据，然后通过接口把数据发送给后端
• 后端用Node.js（或者你正在使用的其他后端技术）接收数据，再用fs模块完成文件写入
• 这样既符合前后端职责分离的原则，也彻底避开了前端环境的限制

举个简单的实现例子：

前端React代码调整 #

// 封装一个发送日志到后端的方法
const sendLogToBackend = async (logData) => {
  try {
    await axios.post('/api/save-ajax-log', logData);
  } catch (err) {
    // 日志发送失败也别影响主流程，控制台打个提示就行
    console.error('日志上传失败:', err);
  }
};

// 在Axios拦截器里收集请求信息并发送
axios.interceptors.request.use(config => {
  sendLogToBackend({
    url: config.url,
    method: config.method,
    timestamp: new Date().toISOString(),
    params: config.params || {}
  });
  return config;
});

后端Node.js/Express示例 #

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 解析JSON请求体
app.use(express.json());

// 确保日志目录存在
const logDir = './ajax-logs';
if (!fs.existsSync(logDir)) {
  fs.mkdirSync(logDir);
}

// 接收前端日志并写入文件
app.post('/api/save-ajax-log', (req, res) => {
  const logEntry = `${JSON.stringify(req.body, null, 2)}\n`;
  const logFilePath = path.join(logDir, `logs-${new Date().toLocaleDateString().replace(/\//g, '-')}.json`);
  
  // 追加写入日志，避免覆盖旧内容
  fs.appendFile(logFilePath, logEntry, (err) => {
    if (err) {
      console.error('写入日志失败:', err);
      return res.status(500).send('日志记录失败');
    }
    res.status(200).send('日志已保存');
  });
});

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

方案2：前端改用浏览器兼容的日志存储方式 #

如果暂时不想搭建后端，也可以把日志存在浏览器的本地存储里，比如localStorage，之后还能做个导出功能让用户下载日志文件：

// 封装前端日志工具
const browserLogger = {
  // 从localStorage读取已有的日志
  logs: JSON.parse(localStorage.getItem('ajaxLogs')) || [],
  
  // 记录日志
  log(requestData) {
    this.logs.push({
      ...requestData,
      timestamp: new Date().toISOString()
    });
    localStorage.setItem('ajaxLogs', JSON.stringify(this.logs));
  },
  
  // 导出日志为JSON文件
  exportLogs() {
    const logBlob = new Blob([JSON.stringify(this.logs, null, 2)], { type: 'application/json' });
    const downloadUrl = URL.createObjectURL(logBlob);
    const downloadLink = document.createElement('a');
    
    downloadLink.href = downloadUrl;
    downloadLink.download = `ajax-logs-${new Date().toISOString().slice(0, 10)}.json`;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(downloadUrl);
  }
};

// 在Axios拦截器里使用
axios.interceptors.request.use(config => {
  browserLogger.log({ url: config.url, method: config.method });
  return config;
});

// 给用户加个导出按钮
<button onClick={() => browserLogger.exportLogs()}>导出请求日志</button>

方案3：让日志模块兼容前后端环境 #

如果你的日志模块需要同时在Node.js和前端复用，可以加个环境判断，自动切换日志方式：

import fs from 'fs';
import path from 'path';

let ourLogger;

// 判断当前环境是否为浏览器
if (typeof window !== 'undefined') {
  // 浏览器环境：用控制台日志 + localStorage存储
  ourLogger = {
    info: (data) => {
      console.log('[INFO]', data);
      const logs = JSON.parse(localStorage.getItem('appLogs')) || [];
      logs.push({ level: 'info', data, timestamp: new Date().toISOString() });
      localStorage.setItem('appLogs', JSON.stringify(logs));
    },
    error: (data) => {
      console.error('[ERROR]', data);
      // 同理处理error级别日志
    }
  };
} else {
  // Node.js环境：继续用原来的文件日志逻辑
  const logDir = './logs';
  if (!fs.existsSync(logDir)) {
    fs.mkdirSync(logDir);
  }
  const filename = path.join(logDir, 'stuff.json');
  const { createLogger, format, transports } = require('winston');
  
  ourLogger = createLogger({
    level: 'info',
    format: format.json(),
    defaultMeta: { service: 'user-service' },
    transports: [
      new transports.File({ filename })
    ]
  });
}

export default ourLogger;

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