如何在 Next.js 中获得正确的服务器端堆栈跟踪行号？

Question

我们的团队正在运行相当简单的 Next.js 应用程序，当我们在代码中遇到问题时，我们会在控制台的堆栈跟踪中看到不正确的行号。

举一个简单的例子，从here找到的create-next-app教程代码开始。然后修改该处理函数以引发错误：

export default function handler(req, res) {
  throw new Error("line2");
  res.status(200).json({ text: 'Hello' })
}

./pages/api/hello.js

然后访问http://localhost:3000/api/hello

在控制台我们看到：

Error: line2
    at handler (webpack-internal:///./pages/api/hello.js:4:9)
    at apiResolver (/home/jasonnet/jack_work/nextjs-blog/node_modules/next/dist/next-server/server/api-utils.js:8:7)
    at process._tickCallback (internal/process/next_tick.js:68:7)

其中列出了第 4 行而不是第 2 行的错误。

这只是一个简单的例子。我们发现有时这看起来工作正常（例如，在使用 Next.js 11.0 的 Linux 上），但实际上，正确的行号是偶然显示的，只需在文件顶部添加导入即可发现它实际上并没有显示。工作。所以我问...

2021 年老式 Next.js（例如 v10、v11）中支持的解决此问题的方法是什么？

Answer 1

要在 Next.js 中获得正确的服务器端堆栈跟踪行号，您可以使用

source-map-support

库。安装它使用：

npm install source-map-support

然后，在服务器端代码中，在顶部添加以下行：

import 'source-map-support/register';

这将为您的服务器端代码启用正确的源映射支持，并且您应该在堆栈跟踪中看到准确的行号。

请记住在进行这些更改后重新启动服务器。这种方法被认为是解决 Next.js 服务器端堆栈跟踪中行号差异的标准方法。