diff --git a/docs/platforms/javascript/common/apis.mdx b/docs/platforms/javascript/common/apis.mdx
index 10596578b950f..d5e3f44f68504 100644
--- a/docs/platforms/javascript/common/apis.mdx
+++ b/docs/platforms/javascript/common/apis.mdx
@@ -1089,6 +1089,79 @@ Wraps a callback with a cron monitor check in. The check in will be sent to Sent
+
+## Instrumenting Load Functions
+
+SvelteKit's universal and server `load` functions are instrumented automatically by default. If you don't want to use `load` auto-instrumentation, you can [disable it](/platforms/javascript/guides/sveltekit/configuration/build/#auto-instrumentation-options) and manually instrument specific `load` functions using the following function wrappers:
+
+ any>(
+ originalLoad: T
+ ): T`}
+>
+Wraps a SvelteKit `load` function declared in `+page.(js|ts)` or `+layout.(js|ts)` with Sentry error and performance monitoring.
+
+
+```javascript
+import { wrapLoadWithSentry } from "@sentry/sveltekit";
+
+export const load = wrapLoadWithSentry(({ fetch }) => {
+ const res = await fetch("/api/data");
+ const data = await res.json();
+ return { data };
+});
+```
+
+
+
+
+ any>(
+ originalServerLoad: T
+ ): T`}
+>
+Wraps a SvelteKit server-only `load` function declared in`+page.server.(js|ts)` or `+layout.server.(js|ts)` with Sentry error and performance monitoring.
+
+
+```javascript
+import { wrapServerLoadWithSentry } from "@sentry/sveltekit";
+
+export const load = wrapServerLoadWithSentry(({ fetch }) => {
+ const res = await fetch("/api/data");
+ const data = await res.json();
+ return { data };
+});
+```
+
+
+
+
+## Instrumenting Server Routes
+
+(
+ originalRouteHandler: (request: T) => Promise
+ ): (requestEvent: T) => Promise`}
+>
+Wraps a SvelteKit [server route handler](https://kit.svelte.dev/docs/routing#server) registered in `+server.(js|ts)` with Sentry error and performance monitoring. This is useful if you have custom server routes that you want to trace or if you want to capture `error()` calls within your server routes.
+
+
+```javascript
+import { wrapServerRouteWithSentry } from "@sentry/sveltekit";
+
+export const GET = wrapServerRouteWithSentry(async () => {
+ // your endpoint logic
+ return new Response("Hello World");
+});
+```
+
+
+
+
+
## Server Actions
diff --git a/docs/platforms/javascript/guides/sveltekit/configuration/build/index.mdx b/docs/platforms/javascript/guides/sveltekit/configuration/build/index.mdx
index ce1ad5a42aea6..b9d3952da8682 100644
--- a/docs/platforms/javascript/guides/sveltekit/configuration/build/index.mdx
+++ b/docs/platforms/javascript/guides/sveltekit/configuration/build/index.mdx
@@ -18,4 +18,128 @@ keywords:
The Sentry SvelteKit SDK supports automatic code instrumentation and source map upload during your app's build process using the `sentrySvelteKit` Vite plugins in your `vite.config.(js|ts)` file.
-For more information on the available configuration options, see [Vite Setup](../../manual-setup/#vite-setup) and the sections on configuring source maps upload and auto instrumentation.
+## Available Options
+
+
+
+## Source Maps Options
+
+
+
+The slug of the Sentry organization associated with the app.
+
+
+
+
+
+The slug of the Sentry project associated with the app.
+
+
+
+
+
+The authentication token to use for all communication with Sentry. Can be obtained from https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/.
+
+
+
+
+
+The base URL of your Sentry instance. Only relevant if you're using a self-hosted or Sentry instance other than sentry.io.
+
+
+
+
+
+By default, `sentrySvelteKit` will try to detect your SvelteKit adapter to configure the source maps upload correctly. If you're not using one of the [supported adapters](/platforms/javascript/guides/sveltekit/) or the wrong one is detected, you can override the adapter detection using the `adapter` option.
+
+
+
+
+
+Disable automatic source maps upload by setting `autoUploadSourceMaps` to `false`.
+
+
+
+## Auto-Instrumentation Options
+
+The SDK primarily uses [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks) to collect error and performance data. However, SvelteKit doesn't yet offer a hook for universal or server-only `load` function calls. Therefore, the SDK uses a Vite plugin to auto-instrument `load` functions so that you don't have to manually add a Sentry wrapper to each function.
+
+Auto-instrumentation is enabled by default when you add the `sentrySvelteKit()` function call to your `vite.config.(js|ts)`.
+However, you can customize the behavior or disable it entirely.
+
+
+ The SDK will only auto-instrument `load` functions in `+page` or `+layout`
+ files that don't contain any Sentry-related code. If you have custom Sentry
+ code in these files, you'll have to [manually add a Sentry
+ wrapper](/platforms/javascript/guides/sveltekit/apis/#load-function-instrumentation)
+ to your `load` functions.
+
+
+
+
+Set `autoInstrument` to `false` to disable auto-instrumentation of any `load` functions. You can still [manually instrument](/platforms/javascript/guides/sveltekit/apis/#load-function-instrumentation) specific `load` functions.
+
+```javascript {filename:vite.config.(js|ts)} {7}
+import { sveltekit } from '@sveltejs/kit/vite';
+import { sentrySvelteKit } from '@sentry/sveltekit';
+
+export default {
+ plugins: [
+ sentrySvelteKit({
+ autoInstrument: false;
+ }),
+ sveltekit(),
+ ],
+ // ... rest of your Vite config
+};
+```
+
+Alternatively, you can provide `autoInstrument` with an object to customize which `load` functions should be instrumented.
+
+
+
+
+
+Set to `false` to disable auto-instrumentation of `load` functions inside `+page.(js|ts)` or `+layout.(js|ts)`.
+
+```javascript {filename:vite.config.(js|ts)} {7-10}
+import { sveltekit } from "@sveltejs/kit/vite";
+import { sentrySvelteKit } from "@sentry/sveltekit";
+
+export default {
+ plugins: [
+ sentrySvelteKit({
+ autoInstrument: {
+ load: false,
+ },
+ }),
+ sveltekit(),
+ ],
+ // ... rest of your Vite config
+};
+```
+
+
+
+
+
+Set to `false` to disable auto-instrumentation of server-only `load` functions inside `+page.server.(js|ts)` or `+layout.server.(js|ts)`.
+
+```javascript {filename:vite.config.(js|ts)} {7-10}
+import { sveltekit } from "@sveltejs/kit/vite";
+import { sentrySvelteKit } from "@sentry/sveltekit";
+
+export default {
+ plugins: [
+ sentrySvelteKit({
+ autoInstrument: {
+ serverLoad: false,
+ },
+ }),
+ sveltekit(),
+ ],
+ // ... rest of your Vite config
+};
+```
+
+
diff --git a/docs/platforms/javascript/guides/sveltekit/index.mdx b/docs/platforms/javascript/guides/sveltekit/index.mdx
index f664504bc380b..375d2642bbb78 100644
--- a/docs/platforms/javascript/guides/sveltekit/index.mdx
+++ b/docs/platforms/javascript/guides/sveltekit/index.mdx
@@ -72,6 +72,8 @@ Our next recommended steps for you are:
- Learn how to [manually capture errors](/platforms/javascript/guides/sveltekit/usage/)
- Continue to [customize your configuration](/platforms/javascript/guides/sveltekit/configuration/)
+- Learn how to [manually instrument](/platforms/javascript/guides/sveltekit/apis#load-function-instrumentation) SvelteKit-specific features
+- Learn more about [deploying SvelteKit apps to Cloudflare Pages](/platforms/javascript/guides/cloudflare/frameworks/sveltekit/)
- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
diff --git a/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx b/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
index f3992e732aaca..8759d5eaa3f31 100644
--- a/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
+++ b/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
@@ -16,7 +16,13 @@ description: "Learn how to manually set up Sentry in your SvelteKit app and capt
Choose the features you want to configure, and this guide will show you how:
@@ -216,131 +222,11 @@ export default {
};
```
-## Step 4: Optional Configuration
-
-The points explain additional optional configuration or more in-depth customization of your Sentry SvelteKit SDK setup.
-
-### Auto-Instrumentation
-
-The SDK primarily uses [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks) to collect error and performance data. However, SvelteKit doesn't yet offer a hook for universal or server-only `load` function calls. Therefore, the SDK uses a Vite plugin to auto-instrument `load` functions so that you don't have to add a Sentry wrapper to each function manually.
-
-Auto-instrumentation is enabled by default when you add the `sentrySvelteKit()` function call to your `vite.config.(js|ts)`. However, you can customize the behavior, or disable it entirely. If you disable it you can still manually wrap specific `load` functions with the `withSentry` function.
-
-
-
-The SDK will only auto-instrument `load` functions in `+page` or `+layout` files that don't contain any Sentry code.
-If you have custom Sentry code in these files, you'll have to [manually](#instrument-load-functions-manually) add the Sentry wrapper to your `load` functions.
-
-
-
-#### Customize Auto-instrumentation
-
-By passing the `autoInstrument` option to `sentrySvelteKit` you can disable auto-instrumentation entirely, or customize which `load` functions should be instrumented:
-
-```javascript {filename:vite.config.(js|ts)} {7-10}
-import { sveltekit } from "@sveltejs/kit/vite";
-import { sentrySvelteKit } from "@sentry/sveltekit";
-
-export default {
- plugins: [
- sentrySvelteKit({
- autoInstrument: {
- load: true,
- serverLoad: false,
- },
- }),
- sveltekit(),
- ],
- // ... rest of your Vite config
-};
-```
-
-#### Disable Auto-instrumentation
-
-If you set the `autoInstrument` option to `false`, the SDK won't auto-instrument any `load` functions. You can still [manually instrument](#instrument-load-functions-manually) specific `load` functions.
-
-```javascript {filename:vite.config.(js|ts)} {7}
-import { sveltekit } from '@sveltejs/kit/vite';
-import { sentrySvelteKit } from '@sentry/sveltekit';
-
-export default {
- plugins: [
- sentrySvelteKit({
- autoInstrument: false;
- }),
- sveltekit(),
- ],
- // ... rest of your Vite config
-};
-```
-
-### Manual Instrumentation
-
-Instead or in addition to [Auto Instrumentation](#auto-instrumentation), you can manually instrument certain SvelteKit-specific features with the SDK:
-
-#### Instrument `load` Functions
-
-SvelteKit's universal and server `load` functions are instrumented automatically by default.
-If you don't want to use `load` auto-instrumentation, you can [disable it](#disable-auto-instrumentation), and manually instrument specific `load` functions with the SDK's `load` function wrappers.
-
-##### Universal `load` Functions
-
-Use the `wrapLoadWithSentry` function to wrap universal `load` functions declared in `+page.(js|ts)` or `+layout.(js|ts)`
-
-```javascript {filename:+(page|layout).(js|ts)} {1,3}
-import { wrapLoadWithSentry } from "@sentry/sveltekit";
-
-export const load = wrapLoadWithSentry(({ fetch }) => {
- const res = await fetch("/api/data");
- const data = await res.json();
- return { data };
-});
-```
-
-##### Server-only `load` Functions
-
-Or use the `wrapServerLoadWithSentry` function to wrap server-only `load` functions declared in `+page.server.(js|ts)` or `+layout.server.(js|ts)`
-
-```javascript {filename:+(page|layout).server.(js|ts)} {1,3}
-import { wrapServerLoadWithSentry } from "@sentry/sveltekit";
-
-export const load = wrapServerLoadWithSentry(({ fetch }) => {
- const res = await fetch("/api/data");
- const data = await res.json();
- return { data };
-});
-```
-
-#### Instrument Server Routes
-
-
-
-Available since `8.25.0`
-
-
-
-You can also manually instrument [server (API) routes ](https://kit.svelte.dev/docs/routing#server) with the SDK.
-This is useful if you have custom server routes that you want to trace or if you want to capture `error()` calls within your server routes:
-
-```javascript {filename:+server.(js|ts)} {1,3}
-import { wrapServerRouteWithSentry } from "@sentry/sveltekit";
-
-export const GET = wrapServerRouteWithSentry(async () => {
- // your endpoint logic
- return new Response("Hello World");
-});
-```
-
-## Step 5: Cloudflare Pages Configuration (Optional)
-
-If you're deploying your application to Cloudflare Pages, you need to adjust your server-side setup.
-Follow this guide to [configure Sentry for Cloudflare](/platforms/javascript/guides/cloudflare/frameworks/sveltekit/).
-
-## Step 6: Avoid Ad Blockers With Tunneling (Optional)
+## Step 4: Avoid Ad Blockers With Tunneling (Optional)
-## Step 7: Verify Your Setup
+## Step 5: Verify Your Setup
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
@@ -424,6 +310,8 @@ Our next recommended steps for you are:
- Learn how to [manually capture errors](/platforms/javascript/guides/sveltekit/usage/)
- Continue to [customize your configuration](/platforms/javascript/guides/sveltekit/configuration/)
+- Learn how to [manually instrument](/platforms/javascript/guides/sveltekit/apis#load-function-instrumentation) SvelteKit-specific features
+- Learn more about [deploying SvelteKit apps to Cloudflare Pages](/platforms/javascript/guides/cloudflare/frameworks/sveltekit/)
- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
diff --git a/src/components/sdkOption.tsx b/src/components/sdkOption.tsx
index b448a87ba15d4..69a1999144e6e 100644
--- a/src/components/sdkOption.tsx
+++ b/src/components/sdkOption.tsx
@@ -40,7 +40,7 @@ export function SdkOption({
)}
-
+
{envVar && }