Vercel结合SvelteKit无法收集Web Vitals数据，求解决方案

针对SvelteKit部署在Vercel环境下开启Web Vitals后始终无数据接入的情况，从CSP配置及部署环节逐一排查，给出以下具体方案：

1. 补充CSP的connect-src指令 #

Web Vitals数据需要向Vercel服务上报，仅配置script-src允许脚本加载还不够，必须确保connect-src允许上报请求。修改你的CSP配置，在directives和reportOnly中都添加对应规则：

kit: {
    adapter: vercel(),
    csp: {
        mode: "auto",
        directives: {
            "script-src": [
                "self",
                "vitals.vercel-insights.com",
                "cdn.vercel-insights.com",
                "vercel.live"
            ],
            // 新增connect-src指令，允许上报请求
            "connect-src": [
                "self",
                "vitals.vercel-insights.com"
            ]
        },
        reportOnly: {
            "script-src": [
                "self",
                "vitals.vercel-insights.com",
                "cdn.vercel-insights.com",
                "vercel.live"
            ],
            // 同步在reportOnly中添加connect-src
            "connect-src": [
                "self",
                "vitals.vercel-insights.com"
            ],
            "report-uri": [
                `REDACTED`
            ]
        }
    }
}

2. 排查CSP拦截报错 #

打开浏览器开发者工具（F12）：

• 查看Console面板，是否存在Refused to connect或Refused to load script这类CSP报错，直接定位拦截点。
• 切换到Network面板，筛选XHR/Fetch，检查是否有向vitals.vercel-insights.com发送的请求，无请求则说明脚本未加载或上报被拦截。

3. 清除缓存并强制刷新 #

重新部署后浏览器可能缓存旧的CSP响应头，按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面，确保加载最新配置。

4. 确认Vercel自动注入逻辑 #

SvelteKit的Vercel适配器默认会自动注入Web Vitals脚本，检查是否存在手动禁用情况：

• 查看vercel.json，确保没有配置functions或headers覆盖默认注入行为。
• 若手动集成过Insights代码，需确认初始化逻辑正确且无冲突。

5. 验证控制台配置与数据延迟 #

• 重新进入Vercel控制台的Insights > Web Vitals页面，确认功能已针对当前项目开启。
• Web Vitals数据存在一定延迟，修改配置并重新部署后，等待5-10分钟再刷新控制台查看数据是否接入。

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