SuperAPI AI 工具集

sentry-svelte-sdk

编程与开发

查看项目

更新于 10-15 15:31

技能介绍

用途

该技能用于为 Svelte 与 SvelteKit 应用完整安装和配置 Sentry SDK,触发场景包括用户要求“为 Svelte 添加 Sentry”“为 SvelteKit 添加 Sentry”、安装 @sentry/sveltekit,或希望为 Svelte/SvelteKit 应用添加错误监控、链路追踪、会话回放、日志等能力。

主要能力

技能会先检测项目:在 package.json 中查找 svelte、@sveltejs/kit、@sentry/svelte、@sentry/sveltekit;检查 SvelteKit 版本(决定使用哪种设置模式);检查是否已安装 Sentry;检查现有 hooks 文件;检测日志库(pino、winston、consola);并查看相邻目录中是否存在 Go、Python、Ruby 等后端。

随后给出推荐配置,核心覆盖包括:错误监控(始终推荐,自动捕获客户端与服务端未处理错误)、链路追踪(SvelteKit 的客户端导航 span 与服务端请求 span,始终推荐)、会话回放(面向用户的 SvelteKit 应用,仅客户端)。可选增强为日志(通过 Sentry.logger.* 输出结构化日志,适用于已有服务端日志或需要日志与链路关联的场景)。

使用方式

技能内容按路径区分:

  • 路径 A:SvelteKit(推荐,≥2.31.0)。可使用向导命令 npx @sentry/wizard@latest -i sveltekit,或手动配置。手动步骤包括:npm install @sentry/sveltekit --save;在 svelte.config.js 启用 experimental.instrumentation.server 与 tracing.server;创建 src/instrumentation.server.ts 进行服务端初始化;在 src/hooks.client.ts 做客户端初始化并导出 handleError;在 src/hooks.server.ts 导出 handleError 与 sentryHandle();在 vite.config.ts 中使用 sentrySvelteKit() 插件上传 source map(需 SENTRY_AUTH_TOKEN)。
  • 路径 B:旧版 SvelteKit(<2.31.0)。跳过 instrumentation.server.ts 与 svelte.config.js 改动,直接在 hooks.server.ts 中调用 Sentry.init()。
  • 路径 C:纯 Svelte(无 SvelteKit)。安装 npm install @sentry/svelte --save,在入口文件(src/main.ts 或 src/main.js)挂载前初始化,可选通过 withSentryConfig 启用组件追踪。

对每个选定的功能,技能会加载对应的 reference 文件(error-monitoring.md、tracing.md、session-replay.md、logging.md)并逐步引导,完成后进行验证。

适用场景与限制

适用于需要为 Svelte 或 SvelteKit 项目接入 Sentry 的开发者,覆盖错误监控、追踪、会话回放与日志。适配器方面:adapter-auto、adapter-vercel(Node)、adapter-node 支持完整;adapter-cloudflare 需额外配置,仅部分支持;Vercel Edge Runtime 不支持。会话回放仅限客户端。旧版包装函数 wrapLoadWithSentry、wrapServerLoadWithSentry 在 ≥10.8.0 中已由 sentryHandle() 自动处理,应移除。SDK 版本与 API 反映撰写时 Sentry 文档(@sentry/sveltekit ≥10.8.0,SvelteKit ≥2.31.0),实施前应核对官方文档。技能还包含验证步骤(触发测试错误、消息、服务端错误并检查仪表盘)以及常见问题排查(事件未出现、source map 失效、hooks 未导出、回放未录制、handle 未组合、广告拦截、Cloudflare 适配器问题等)。