Next.js：在构建/预渲染期间使用源映射来处理错误

Question

是否可以使用生成代码的源映射来获取构建期间预渲染发出的错误的完整堆栈跟踪？

目前，如果在next build 期间预渲染页面失败，则错误堆栈跟踪输出来自缩小代码而不是项目的实际源，因此很难跟踪错误。

即使在next.config.js 中启用了productionBrowserSourceMaps，似乎预渲染仍然会发出错误并缩小堆栈跟踪，这使得查找源非常困难。

Answer 1

经过大量的挖掘和实验，是的，看起来你可以！

通过在 Next.js 使用的 Webpack 配置中强制启用源映射（仅在服务器上下文中，我们不想将源泄漏给客户端），我从预渲染构建错误中记录了正确的源映射错误：

// next.config.js
module.exports = {
  webpack(config, options) {
    if (options.isServer) config.devtool = 'source-map';
    return config;
  },
};

这将确保 Next.js 为构建期间用于预渲染的所有 JS 文件生成源映射。为了让错误堆栈跟踪然后使用这些，需要在 Next.js 构建时启用 Node.js 的源映射支持，这可以通过传递 NODE_OPTIONS=--enable-source-maps next build 来完成。