Skip to main content ホーム クリエイター getsentry sentry-agent-skills sentry-svelte-sdk
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.
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/getsentry/sentry-agent-skills --skill sentry-svelte-sdkコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中... 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.
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.
name sentry-svelte-sdk description 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. license Apache-2.0
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:
cat package.json | grep -E '"svelte"|"@sveltejs/kit"|"@sentry/svelte"|"@sentry/sveltekit"'
ls svelte.config.js svelte.config.ts vite.config.ts vite.config.js 2>/dev/null
cat
'"@sveltejs/kit"'
cat
'"@sentry/'
ls
cat
'"pino"|"winston"|"consola"'
ls
cat
head
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
Feature Recommend when... Error Monitoring Always — non-negotiable baselineTracing Always for SvelteKit (client + server); for plain Svelte when calling APIsSession 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/sveltekit5 files to create/modify SvelteKit (<2.31.0) @sentry/sveltekit3 files (init in hooks.server.ts) Plain Svelte (no @sveltejs/kit) @sentry/svelteSingle 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 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 ,
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 ();
export const handle = Sentry .sentryHandle ();
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 ({
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:
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) 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):
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.mdAlways (baseline) Tracing ${SKILL_ROOT}/references/tracing.mdAPI calls / distributed tracing needed Session Replay ${SKILL_ROOT}/references/session-replay.mdUser-facing app Logging ${SKILL_ROOT}/references/logging.mdStructured 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.tsServer Sentry.init() — runs once at startup ✅ Required ❌ src/hooks.client.tsClient Sentry.init() + handleError ✅ Required ✅ Required src/hooks.server.tshandleError + sentryHandle() (no init)✅ Required ✅ Init goes here svelte.config.jsEnable experimental.instrumentation.server ✅ Required ❌ vite.config.tssentrySvelteKit() plugin for source maps✅ Recommended ✅ Recommended .envSENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT✅ For source maps ✅ For source maps
Configuration Reference
Key Sentry.init() Options Option Type Default Notes dsnstring— Required. Use env var; SDK is disabled when emptyenvironmentstring"production"e.g., "staging", "development" releasestring— e.g., "my-app@1.2.3" or git SHA sendDefaultPiibooleanfalseIncludes IP addresses and request headers tracesSampleRatenumber— 0–1; use 1.0 in dev, 0.1–0.2 in prod tracesSamplerfunction— Per-transaction sampling; overrides tracesSampleRate tracePropagationTargets(string|RegExp)[]— URLs that receive distributed tracing headers replaysSessionSampleRatenumber— Fraction of all sessions recorded (client only) replaysOnErrorSampleRatenumber— Fraction of error sessions recorded (client only) enableLogsbooleanfalseEnable Sentry.logger.* API beforeSendLogfunction— Filter/modify logs before send debugbooleanfalseVerbose SDK output to console
Server-Only Options (instrumentation.server.ts / hooks.server.ts) Option Type Notes serverNamestringHostname tag on server events includeLocalVariablesbooleanAttach local vars to stack frames shutdownTimeoutnumberms 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>
export const GET = (throw new Error ("Sentry server test" );
};
Check the Sentry dashboard:
Issues → both errors should appear within secondsTraces → look for route-based transactionsReplays → session recording visible after page interactionLogs → 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:
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:
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 composingWrap 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 errorsThese are legacy wrappers — remove them; sentryHandle() instruments load functions automatically in ≥10.8.0
