为何console.log显示正确行号而console.error不显示？如何记录带行号的JS错误

这问题我之前在React+Redux项目里也踩过坑！console.log能正常显示行号，但console.error只指向index.js:1，通常和打包工具的source map配置、日志输出的方式有关，下面给你几个实用的解决办法：

1. 用Error对象替代直接字符串输出 #

直接传递字符串给console.error时，部分打包工具（比如Webpack、Vite）在代码压缩或优化过程中，会把这类调用合并到同一个位置，导致行号丢失。换成创建Error对象来打印，就能保留完整的调用栈和正确的源码行号：

修改你切片里的default分支代码：

default:
  // 创建Error对象，自动生成调用栈
  const err = new Error(`messageState recordActionPosition: Invalid action: ${action.payload.action}`);
  console.error(err);
  return;

这样打印出来的错误会包含完整的栈跟踪，直接指向你写这段代码的真实行号。

2. 检查开发环境的Source Map配置 #

确保你的打包工具在开发环境下开启了正确的source map，这是错误映射到源码行号的基础：

• 如果你用Create React App：默认开发环境已经开启了source map，不需要额外配置；如果手动修改过webpack.config.js，确保devtool设置为'eval-cheap-module-source-map'或'source-map'。
• 如果你用Vite：在vite.config.js里设置server.sourcemap: true，确保开发环境下source map正常生成。

生产环境如果需要调试也可以开启source map，但注意会增加包体积，开发环境一定要开！

3. 封装自定义错误日志函数（可选） #

如果项目里有很多地方需要打印错误，可以封装一个统一的日志函数，既保证行号正确，还能做一些自定义处理（比如过滤栈里的封装函数）：

const logAppError = (message) => {
  const error = new Error(message);
  // 移除logAppError自身在栈跟踪里的记录，让错误直接指向调用位置
  error.stack = error.stack.replace(/at logAppError.*\n/, '');
  console.error(error);
};

然后在你的Redux切片里调用：

default:
  logAppError(`messageState recordAction: Invalid action: ${action.payload.action}`);
  return;

4. 排查Redux DevTools的干扰 #

有时候Redux DevTools浏览器扩展可能会干扰日志的行号显示，可以临时关闭扩展，看看console.error的行号是否恢复正常。如果是扩展的问题，尝试更新到最新版本，或者调整DevTools的配置项。

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