Chrome控制台日志来源显示为fs.js，NextJS项目排查求助

可能原因 #

• 第三方日志/监控库重写了console方法：这类工具初始化后常封装原生console，导致调用栈指向其依赖的Node.js fs模块。
• Next.js配置或插件干扰：自定义webpack配置、开发插件可能破坏了源映射（source maps）的生成。
• 依赖包自动更新：即使你没改代码，依赖的新版本可能引入了改变console行为的逻辑。

解决步骤 #

1. 临时禁用第三方日志工具
   注释掉Sentry、LogRocket这类工具的初始化代码，重启开发服务。如果日志恢复正常，就去调整该工具的配置，关闭对console的重写，或者开启源映射支持。

2. 排查console是否被重写
   在控制台执行console.log.toString()，如果输出不是function log() { [native code] }，说明console被篡改了。可以在项目入口（比如_app.tsx）顶部加这段代码追踪重写来源：

   const originalLog = console.log;
   console.log = function(...args) {
     originalLog('Console重写调用栈：', new Error().stack);
     originalLog(...args);
   };
   

   启动项目后，看控制台输出的调用栈，定位重写console的代码。

3. 修复Next.js源映射配置
   在next.config.js中确保源映射正确配置，开发环境默认开启，但自定义配置可能覆盖：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     productionBrowserSourceMaps: true,
     webpack: (config, { dev }) => {
       if (dev) {
         config.devtool = 'eval-cheap-module-source-map'; // 保证开发环境行号准确
       }
       return config;
     },
   };
   
   module.exports = nextConfig;
   

   重启服务后验证日志来源。

4. 清除缓存重启
   删除.next目录（rm -rf .next或Windows下rd /s /q .next），再重启npm run dev，缓存问题也可能导致源映射异常。

5. 切换Node.js版本
   某些Node.js版本和Next.js存在兼容性问题，用nvm切换到项目推荐的版本（看package.json的engines字段）：

   nvm use 18 # 示例版本，按项目要求调整
   

验证方式 #

在任意组件中加测试日志：

import { useEffect } from 'react';

export default function TestComponent() {
  useEffect(() => {
    console.log('测试日志，检查来源');
  }, []);
  return <div>Test</div>;
}

打开Chrome控制台，确认该日志的来源是否显示为对应的组件文件和行号。

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