TypeError: Fetch failed in SvelteKit服务器端渲染- Express没有显示正确的Ty

Question

我正在使用adapter-node检查SvelteKit SSR服务器的日志。

我已经定制了server.js使用Express而不是Polka，虽然不确定这是否重要。

有明显的错误，我认为是当fetch()试图从后端API读取数据并由于某种原因失败。

这是我使用docker得到的控制台输出:

frontend  | TypeError: fetch failed
frontend  |     at fetch (file:///app/build/handler.js:17895:14)
frontend  |     at async Object.fetch (file:///app/build/server/index.js:2273:12)
frontend  |     at async fetch (file:///app/build/server/index.js:991:24)
frontend  |     at async Promise.all (index 0)
frontend  |     at async load (file:///app/build/server/chunks/6-0becfa88.js:8:56)
frontend  |     at async load_data (file:///app/build/server/index.js:1088:16)
frontend  |     at async file:///app/build/server/index.js:1887:18

这个堆栈跟踪是不可用的，因为它缺乏调用fetch()的函数/源代码的信息。不确定这是因为Node.js/Express的工作方式，还是因为在堆栈的某些部分缺乏TypeScript源映射支持或其他原因。SvelteKit项目有几十个称为load()的函数，因为每个路由器端点都有。

如何使这些错误和SvelteKit错误处理更具有描述性-例如，显示正确的调用者映射到它的TypeScript源文件，失败的页面名称，fetch()中失败的URL等等?这将有助于诊断失败的API调用可能出现的潜在问题。

Answer 1

可以在src/hooks.server.ts中定义handleFetch()。然后记录所请求的URL和页面:

// src/hooks.server.js
/** @type {import('@sveltejs/kit').HandleFetch} */
export function handleFetch({ event, request, fetch }) {
let fetchResult;
try {
fetchResult = await fetch(request);
} catch (error) {
// Log info from event and request here.
}
return fetchResult;
}

Answer 2

问题可能是缺少sourcemap.

当SvelteKit构建你的应用程序时，它会把你的代码分成几个块，这会导致无法使用的错误堆栈跟踪。

有一种方法可以再次启用sourcemap，你可以在你的项目中尝试一下，看看它是否有效。

1. 修改vite.config.xx文件，添加以下配置:

const config = {
...
build:{
sourcemap: true // Config vite to generate sourcemap when bundling.
},
...
}

2. 在启动节点时添加sourcemap标志，例如:

node index.js --enable-source-maps

这会使堆栈跟踪指向src而不是build。您可以尝试检查您的项目是否仍在打印无意义的堆栈跟踪。