类型错误：在 SvelteKit 服务器端渲染中获取失败 - Express 未显示正确的 TypeScript 堆栈跟踪

Question

赏金将在 3 天后到期。 此问题的答案有资格获得+500声望赏金。 Mikko Ohtamaa想提请更多人关注这个问题。

我正在使用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()的 function / 源代码的信息。 不确定这是因为 Node.js / Express 的工作方式，还是因为在堆栈的某些部分或其他方面缺少 TypeScript source map 支持。 一个 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 。 您可以尝试检查您的项目是否仍在打印无意义的堆栈跟踪。