Agent skill
sentry-svelte-sdk
Full Sentry SDK setup for Svelte and SvelteKit. Use when asked to "add Sentry to Svelte", "add Sentry to SvelteKit", "install @sentry/sveltekit", or configure error monitoring, tracing, session replay, or logging for Svelte or SvelteKit applications.
Install this agent skill to your Project
npx add-skill https://github.com/getsentry/sentry-agent-skills/tree/main/skills/sentry-svelte-sdk
SKILL.md
Sentry Svelte SDK
Opinionated wizard that scans your project and guides you through complete Sentry setup for Svelte and SvelteKit.
Invoke This Skill When
- User asks to "add Sentry to Svelte" or "set up Sentry" in a Svelte/SvelteKit app
- User wants error monitoring, tracing, session replay, or logging in Svelte or SvelteKit
- User mentions
@sentry/svelte,@sentry/sveltekit, or Sentry SDK for Svelte
Note: SDK versions and APIs below reflect current Sentry docs at time of writing (
@sentry/sveltekit≥10.8.0, SvelteKit ≥2.31.0). Always verify against docs.sentry.io/platforms/javascript/guides/sveltekit/ before implementing.
Phase 1: Detect
Run these commands to understand the project before making any recommendations:
# Detect framework type
cat package.json | grep -E '"svelte"|"@sveltejs/kit"|"@sentry/svelte"|"@sentry/sveltekit"'
# Check for SvelteKit indicators
ls svelte.config.js svelte.config.ts vite.config.ts vite.config.js 2>/dev/null
# Check SvelteKit version (determines which setup pattern to use)
cat package.json | grep '"@sveltejs/kit"'
# Check if Sentry is already installed
cat package.json | grep '"@sentry/'
# Check existing hook files
ls src/hooks.client.ts src/hooks.client.js src/hooks.server.ts src/hooks.server.js \
src/instrumentation.server.ts 2>/dev/null
# Detect logging libraries (Node side)
cat package.json | grep -E '"pino"|"winston"|"consola"'
# Detect if there's a backend (Go, Python, Ruby, etc.) in adjacent directories
ls ../backend ../server ../api 2>/dev/null
cat ../go.mod ../requirements.txt ../Gemfile 2>/dev/null | head -3
What to determine:
| Question | Impact |
|---|---|
@sveltejs/kit in package.json? |
SvelteKit path vs. plain Svelte path |
| SvelteKit ≥2.31.0? | Modern (instrumentation.server.ts) vs. legacy setup |
@sentry/sveltekit already present? |
Skip install, go straight to feature config |
vite.config.ts present? |
Source map upload via Vite plugin available |
| Backend directory found? | Trigger Phase 4 cross-link suggestion |
Phase 2: Recommend
Present a concrete recommendation based on what you found. Don't ask open-ended questions — lead with a proposal:
Recommended (core coverage):
- ✅ Error Monitoring — always; auto-captures unhandled errors on client and server
- ✅ Tracing — SvelteKit has both client-side navigation spans and server-side request spans; always recommend
- ✅ Session Replay — recommended for user-facing SvelteKit apps (client-side only)
Optional (enhanced observability):
- ⚡ Logging — structured logs via
Sentry.logger.*; recommend when app uses server-side logging or needs log-to-trace correlation
Recommendation logic:
| Feature | Recommend when... |
|---|---|
| Error Monitoring | Always — non-negotiable baseline |
| Tracing | Always for SvelteKit (client + server); for plain Svelte when calling APIs |
| Session Replay | User-facing app, login flows, or checkout pages present |
| Logging | App already uses server-side logging, or structured log search is needed |
Propose: "I recommend setting up Error Monitoring + Tracing + Session Replay. Want me to also add structured Logging?"
Phase 3: Guide
Determine Setup Path
| Your project | Package | Setup complexity |
|---|---|---|
| SvelteKit (≥2.31.0) | @sentry/sveltekit |
5 files to create/modify |
| SvelteKit (<2.31.0) | @sentry/sveltekit |
3 files (init in hooks.server.ts) |
Plain Svelte (no @sveltejs/kit) |
@sentry/svelte |
Single entry point |
Path A: SvelteKit (Recommended — Modern, ≥2.31.0)
Option 1: Wizard (Recommended)
npx @sentry/wizard@latest -i sveltekit
The wizard walks you through login, org/project selection, and auth token setup interactively — no manual token creation needed. It then installs the SDK, creates all necessary files (client/server hooks, Vite plugin config), configures source map upload, and adds a /sentry-example-page for verification. Skip to Verification after running it.
Option 2: Manual Setup
Step 1 — Install
npm install @sentry/sveltekit --save
Step 2 — svelte.config.js — Enable instrumentation
import adapter from "@sveltejs/adapter-auto";
const config = {
kit: {
adapter: adapter(),
experimental: {
instrumentation: { server: true },
tracing: { server: true },
},
},
};
export default config;
Step 3 — src/instrumentation.server.ts — Server-side init (runs once at startup)
import * as Sentry from "@sentry/sveltekit";
Sentry.init({
dsn: process.env.SENTRY_DSN,
environment: process.env.SENTRY_ENVIRONMENT,
release: process.env.SENTRY_RELEASE,
sendDefaultPii: true,
tracesSampleRate: 1.0, // lower to 0.1–0.2 in production
enableLogs: true,
});
Step 4 — src/hooks.client.ts — Client-side init
import * as Sentry from "@sentry/sveltekit";
Sentry.init({
dsn: import.meta.env.PUBLIC_SENTRY_DSN ?? import.meta.env.VITE_SENTRY_DSN,
environment: import.meta.env.MODE,
sendDefaultPii: true,
tracesSampleRate: 1.0,
integrations: [
Sentry.replayIntegration({
maskAllText: true,
blockAllMedia: true,
}),
],
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
enableLogs: true,
});
export const handleError = Sentry.handleErrorWithSentry();
Step 5 — src/hooks.server.ts — Server hooks (no init here in modern setup)
import * as Sentry from "@sentry/sveltekit";
import { sequence } from "@sveltejs/kit/hooks";
export const handleError = Sentry.handleErrorWithSentry();
// sentryHandle() instruments incoming requests and creates root spans
export const handle = Sentry.sentryHandle();
// If you have other handle functions, compose with sequence():
// export const handle = sequence(Sentry.sentryHandle(), myAuthHandle);
Step 6 — vite.config.ts — Source maps (requires SENTRY_AUTH_TOKEN)
import { sveltekit } from "@sveltejs/kit/vite";
import { sentrySvelteKit } from "@sentry/sveltekit";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
// sentrySvelteKit MUST come before sveltekit()
sentrySvelteKit({
org: process.env.SENTRY_ORG,
project: process.env.SENTRY_PROJECT,
authToken: process.env.SENTRY_AUTH_TOKEN,
}),
sveltekit(),
],
});
Add to .env (never commit):
SENTRY_AUTH_TOKEN=sntrys_...
SENTRY_ORG=my-org-slug
SENTRY_PROJECT=my-project-slug
Path B: SvelteKit Legacy (<2.31.0 or @sentry/sveltekit <10.8.0)
Skip instrumentation.server.ts and svelte.config.js changes. Instead, put Sentry.init() directly in hooks.server.ts:
// src/hooks.server.ts (legacy — init goes here)
import * as Sentry from "@sentry/sveltekit";
Sentry.init({
dsn: process.env.SENTRY_DSN,
tracesSampleRate: 1.0,
enableLogs: true,
});
export const handleError = Sentry.handleErrorWithSentry();
export const handle = Sentry.sentryHandle();
hooks.client.ts and vite.config.ts are identical to the modern path.
Path C: Plain Svelte (no SvelteKit)
Install:
npm install @sentry/svelte --save
Configure in entry point (src/main.ts or src/main.js) before mounting the app:
import * as Sentry from "@sentry/svelte";
import App from "./App.svelte";
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN,
environment: import.meta.env.MODE,
sendDefaultPii: true,
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration({
maskAllText: true,
blockAllMedia: true,
}),
],
tracesSampleRate: 1.0,
tracePropagationTargets: ["localhost", /^https:\/\/yourapi\.io/],
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
enableLogs: true,
});
const app = new App({ target: document.getElementById("app")! });
export default app;
Optional: Svelte component tracking (auto-injects tracking into all components):
// svelte.config.js
import { withSentryConfig } from "@sentry/svelte";
export default withSentryConfig(
{ compilerOptions: {} },
{ componentTracking: { trackComponents: true } }
);
For Each Agreed Feature
Walk through features one at a time. Load the reference file, follow its steps, then verify before moving on:
| Feature | Reference | Load when... |
|---|---|---|
| Error Monitoring | ${SKILL_ROOT}/references/error-monitoring.md |
Always (baseline) |
| Tracing | ${SKILL_ROOT}/references/tracing.md |
API calls / distributed tracing needed |
| Session Replay | ${SKILL_ROOT}/references/session-replay.md |
User-facing app |
| Logging | ${SKILL_ROOT}/references/logging.md |
Structured logs / log-to-trace correlation |
For each feature: Read ${SKILL_ROOT}/references/<feature>.md, follow steps exactly, verify it works.
SvelteKit File Summary
| File | Purpose | Modern | Legacy |
|---|---|---|---|
src/instrumentation.server.ts |
Server Sentry.init() — runs once at startup |
✅ Required | ❌ |
src/hooks.client.ts |
Client Sentry.init() + handleError |
✅ Required | ✅ Required |
src/hooks.server.ts |
handleError + sentryHandle() (no init) |
✅ Required | ✅ Init goes here |
svelte.config.js |
Enable experimental.instrumentation.server |
✅ Required | ❌ |
vite.config.ts |
sentrySvelteKit() plugin for source maps |
✅ Recommended | ✅ Recommended |
.env |
SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT |
✅ For source maps | ✅ For source maps |
Configuration Reference
Key Sentry.init() Options
| Option | Type | Default | Notes |
|---|---|---|---|
dsn |
string |
— | Required. Use env var; SDK is disabled when empty |
environment |
string |
"production" |
e.g., "staging", "development" |
release |
string |
— | e.g., "my-app@1.2.3" or git SHA |
sendDefaultPii |
boolean |
false |
Includes IP addresses and request headers |
tracesSampleRate |
number |
— | 0–1; use 1.0 in dev, 0.1–0.2 in prod |
tracesSampler |
function |
— | Per-transaction sampling; overrides tracesSampleRate |
tracePropagationTargets |
(string|RegExp)[] |
— | URLs that receive distributed tracing headers |
replaysSessionSampleRate |
number |
— | Fraction of all sessions recorded (client only) |
replaysOnErrorSampleRate |
number |
— | Fraction of error sessions recorded (client only) |
enableLogs |
boolean |
false |
Enable Sentry.logger.* API |
beforeSendLog |
function |
— | Filter/modify logs before send |
debug |
boolean |
false |
Verbose SDK output to console |
Server-Only Options (instrumentation.server.ts / hooks.server.ts)
| Option | Type | Notes |
|---|---|---|
serverName |
string |
Hostname tag on server events |
includeLocalVariables |
boolean |
Attach local vars to stack frames |
shutdownTimeout |
number |
ms to flush events before process exit (default: 2000) |
Adapter Compatibility
| Adapter | Support |
|---|---|
@sveltejs/adapter-auto / adapter-vercel (Node) |
✅ Full |
@sveltejs/adapter-node |
✅ Full |
@sveltejs/adapter-cloudflare |
⚠️ Partial — requires extra setup |
| Vercel Edge Runtime | ❌ Not supported |
Verification
After setup, trigger test events to confirm Sentry is receiving data:
<!-- src/routes/sentry-test/+page.svelte -->
<script>
import * as Sentry from "@sentry/sveltekit";
</script>
<button onclick={() => { throw new Error("Sentry client test"); }}>
Test Client Error
</button>
<button onclick={() => Sentry.captureMessage("Sentry test message", "info")}>
Test Message
</button>
// src/routes/sentry-test/+server.ts
export const GET = () => {
throw new Error("Sentry server test");
};
Check the Sentry dashboard:
- Issues → both errors should appear within seconds
- Traces → look for route-based transactions
- Replays → session recording visible after page interaction
- Logs → structured log entries (if logging enabled)
If nothing appears, set debug: true in Sentry.init() and check the browser/server console for SDK output.
Phase 4: Cross-Link
After completing Svelte/SvelteKit setup, check for a companion backend missing Sentry coverage:
# Look for backend in adjacent directories
ls ../backend ../server ../api ../go ../python 2>/dev/null
cat ../go.mod 2>/dev/null | head -3
cat ../requirements.txt ../pyproject.toml 2>/dev/null | head -3
cat ../Gemfile 2>/dev/null | head -3
If a backend exists without Sentry configured, suggest the matching skill:
| Backend detected | Suggest skill |
|---|---|
Go (go.mod) |
sentry-go-sdk |
Python (requirements.txt, pyproject.toml) |
sentry-python-sdk |
Ruby (Gemfile) |
sentry-ruby-sdk |
| Node.js (Express, Fastify, etc.) | Use @sentry/node — see docs.sentry.io/platforms/javascript/guides/express/ |
Troubleshooting
| Issue | Solution |
|---|---|
| Events not appearing | Set debug: true, check DSN, open browser console for SDK errors |
| Source maps not working | Run npm run build (not dev), verify SENTRY_AUTH_TOKEN is set |
| Server errors not captured | Ensure handleErrorWithSentry() is exported from hooks.server.ts |
| Client errors not captured | Ensure handleErrorWithSentry() is exported from hooks.client.ts |
| Session replay not recording | Confirm replayIntegration() is in client init only (never server) |
sentryHandle() + other handles not composing |
Wrap with sequence(Sentry.sentryHandle(), myHandle) |
| Ad-blocker blocking events | Set tunnel: "/sentry-tunnel" and add a server-side relay endpoint |
| SvelteKit instrumentation not activating | Confirm experimental.instrumentation.server: true in svelte.config.js |
| Cloudflare adapter issues | Consult docs.sentry.io/platforms/javascript/guides/sveltekit/ for adapter-specific notes |
wrapLoadWithSentry / wrapServerLoadWithSentry errors |
These are legacy wrappers — remove them; sentryHandle() instruments load functions automatically in ≥10.8.0 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
sentry-pr-code-review
Review a project's PRs to check for issues detected in code review by Seer Bug Prediction. Use when asked to review or fix issues identified by Sentry in PR comments, or to find recent PRs with Sentry feedback.
sentry-dotnet-sdk
Full Sentry SDK setup for .NET. Use when asked to "add Sentry to .NET", "install Sentry for C#", or configure error monitoring, tracing, profiling, logging, or crons for ASP.NET Core, MAUI, WPF, WinForms, Blazor, Azure Functions, or any other .NET application.
sentry-nextjs-sdk
Full Sentry SDK setup for Next.js. Use when asked to "add Sentry to Next.js", "install @sentry/nextjs", or configure error monitoring, tracing, session replay, logging, profiling, AI monitoring, or crons for Next.js applications. Supports Next.js 13+ with App Router and Pages Router.
sentry-cocoa-sdk
Full Sentry SDK setup for Apple platforms (iOS, macOS, tvOS, watchOS, visionOS). Use when asked to "add Sentry to iOS", "add Sentry to Swift", "install sentry-cocoa", or configure error monitoring, tracing, profiling, session replay, or logging for Apple applications. Supports SwiftUI and UIKit.
sentry-setup-ai-monitoring
Setup Sentry AI Agent Monitoring in any project. Use when asked to monitor LLM calls, track AI agents, or instrument OpenAI/Anthropic/Vercel AI/LangChain/Google GenAI/Pydantic AI. Detects installed AI SDKs and configures appropriate integrations.
sentry-create-alert
Create Sentry alerts using the workflow engine API. Use when asked to create alerts, set up notifications, configure issue priority alerts, or build workflow automations. Supports email, Slack, PagerDuty, Discord, and other notification actions.
Didn't find tool you were looking for?