Skip to content
49 changes: 35 additions & 14 deletions docs/platforms/javascript/guides/sveltekit/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,56 @@ categories:
<StepComponent>
## Install

<Alert level="warning">

The AI-powered `sentry init` flow is currently experimental. To use the existing framework-specific setup instead, see the option below, or check out the [Manual Setup](/platforms/javascript/guides/sveltekit/manual-setup/) guide.

Comment thread
sentry[bot] marked this conversation as resolved.
</Alert>

<SplitLayout>
<SplitSection>
<SplitSectionText>

Run the Sentry wizard to automatically configure Sentry in your SvelteKit application. It will then guide you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
Run the Sentry init command in your project directory to automatically configure Sentry in your SvelteKit application.

The command guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring.

</SplitSectionText>

<SplitSectionCode>

```bash
npx @sentry/wizard@latest -i sveltekit
npx sentry@latest init
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>

<Include name="quick-start-features-expandable" />
<Expandable title="How does sentry init work?">

The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:

- **Analyzes your project** — reads project files and manifests to understand your SvelteKit app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`.
- **Detects your framework** — identifies SvelteKit and selects the `@sentry/sveltekit` SDK.
- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating integration code.
- **Installs dependencies** — adds `@sentry/sveltekit` using your project's package manager.
- **Creates and modifies files** — sets up client-side and server-side initialization, SvelteKit hooks or instrumentation, and other selected features based on your SvelteKit version and project structure.
- **Verifies the integration** — re-reads modified files after writing to confirm Sentry was integrated.

This guide assumes that you enable all features and allow the wizard to create an example page. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.
For full details on what each file does, see the [Manual Setup](/platforms/javascript/guides/sveltekit/manual-setup/) guide.

<Expandable title="What does the installation wizard change inside your application?">
</Expandable>

<Expandable title="Prefer the existing SvelteKit wizard?">

If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead:

```bash
npx @sentry/wizard@latest -i sveltekit
```

- Creates or updates `hooks.(client|server).js` to initialize the SDK and instrument [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks)
- Creates or updates `vite.config.js` to add source maps upload and auto-instrumentation via Vite plugins
- If you're on SvelteKit `2.31.0` or higher:
- Creates `instrumentation.server.js` to initialize the server-side SDK
- Enables server-side instrumentation and tracing in `svelte.config.js`
- Creates `.env.sentry-build-plugin` with an auth token to upload source maps (this file is automatically added to `.gitignore`)
- Adds an example page to your application to help verify your Sentry setup
To configure Sentry manually, follow the [Manual Setup](/platforms/javascript/guides/sveltekit/manual-setup/) guide.

</Expandable>

Expand All @@ -56,7 +75,9 @@ This guide assumes that you enable all features and allow the wizard to create a

## Verify Your Setup

If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard:
The `sentry init` command checks the integration files it creates or modifies before it finishes. To confirm runtime events are reaching Sentry, start your SvelteKit app, exercise the parts of your app that should send events, and then check your Sentry project.

If you used the SvelteKit installation wizard instead, you can also verify your setup with the example page and route it creates:

1. Open the example page `/sentry-example-page` in your browser
2. Click the "Throw Sample Error" button. This triggers two errors:
Expand All @@ -67,7 +88,7 @@ Sentry captures both of these errors for you. Additionally, the button click sta

<Alert level="success" title="Tip">

Don't forget to explore the example files' code in your project to understand what's happening after your button click.
If you used the SvelteKit installation wizard, explore the example files' code in your project to understand what's happening after your button click.

</Alert>

Expand Down
5 changes: 3 additions & 2 deletions docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ description: "Learn how to manually set up Sentry in your SvelteKit app and capt
---

<Alert level="info">
For the fastest setup, we recommend using the [wizard
installer](/platforms/javascript/guides/sveltekit).
Looking for automatic setup with `sentry init` or the SvelteKit wizard? Follow
the [SvelteKit quickstart](/platforms/javascript/guides/sveltekit/) instead.
Continue with this guide to set up Sentry manually.
</Alert>

<PlatformContent includePath="getting-started-complete" />
Loading