Create React App迁移TypeScript后Winston日志源码映射丢失问题

问题根因 #

你看到的BrowserConsole.ts不是CRA生成的中间文件，是你依赖的winston-transport-browserconsole包的源码文件。所有日志都指向这个文件是因为winston的日志打印逻辑是在这个transport内部调用浏览器consoleAPI，浏览器默认会把直接调用console方法的文件位置当做日志来源，而不是你业务代码里调用winston打日志的位置。
之前JS版本正常是因为JS编译阶段的sourcemap对这类跨包调用栈的映射更宽松，迁移TS后TS编译+源映射的规则调整，丢失了原调用位置的映射。

解决方案1（推荐，零配置修改） #

直接替换winston-transport-browserconsole，改用winston原生支持的浏览器console打印逻辑，同时配置format捕获真实调用位置：

1. 先卸载旧依赖：

npm uninstall winston-transport-browserconsole

2. 修改你的winston初始化配置，新增自定义格式来捕获调用栈：

import { createLogger, format, transports } from 'winston';

const { combine, timestamp, printf } = format;

// 自定义日志格式，提取真实调用位置
const logFormat = printf(({ level, message, timestamp, stack }) => {
  return `${timestamp} [${level}]: ${message} ${stack || ''}`;
});

const logger = createLogger({
  level: 'debug',
  format: combine(
    timestamp(),
    format.errors({ stack: true }), // 关键配置：自动捕获错误栈
    logFormat
  ),
  transports: [new transports.Console()], // 用winston原生的Console传输，不需要第三方包
});

export default logger;

3. 配置完重启npm start，此时日志里会附带完整调用栈，点击就能直接跳转到你业务代码里打日志的位置。

解决方案2（不想换依赖的话） #

给winston-transport-browserconsole配置调用栈偏移，修改transport初始化参数：

import BrowserConsole from 'winston-transport-browserconsole';

const consoleTransport = new BrowserConsole({
  level: 'debug',
  // 新增这个配置，让winston跳过transport内部的调用栈，指向你业务代码的位置
  stackTraceOptions: {
    callsiteOffset: 2, // 这个数值可以自己调整，一般2-3就能定位到真实调用位置
  }
});

额外验证步骤 #

如果改完还是有问题，检查下Chrome devtools的配置：

• 打开devtools设置（F12右上角齿轮）
• 确认「Enable JavaScript source maps」是勾选状态
• 确认「Enable custom formatters」没有被误关

以上方案不需要修改任何CRA或TS配置，不会触发react-scripts的参数覆盖逻辑，也不需要执行eject操作。

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