Skip to content

docs(js): Update SvelteKit APIs and Build Options pages #13997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions docs/platforms/javascript/common/apis.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1089,6 +1089,79 @@ Wraps a callback with a cron monitor check in. The check in will be sent to Sent
</SdkApi>
</PlatformCategorySection>

<PlatformSection supported={["javascript.sveltekit"]}>
## 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:

<SdkApi
name="wrapLoadWithSentry"
signature={`function wrapLoadWithSentry<T extends (...args: any) => any>(
originalLoad: T
): T`}
>
Wraps a SvelteKit `load` function declared in `+page.(js|ts)` or `+layout.(js|ts)` with Sentry error and performance monitoring.

<Expandable title="Examples">
```javascript
import { wrapLoadWithSentry } from "@sentry/sveltekit";

export const load = wrapLoadWithSentry(({ fetch }) => {
const res = await fetch("/api/data");
const data = await res.json();
return { data };
});
```

</Expandable>
</SdkApi>

<SdkApi
name="wrapServerLoadWithSentry"
signature={`function wrapServerLoadWithSentry<T extends (...args: any) => 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.

<Expandable title="Examples">
```javascript
import { wrapServerLoadWithSentry } from "@sentry/sveltekit";

export const load = wrapServerLoadWithSentry(({ fetch }) => {
const res = await fetch("/api/data");
const data = await res.json();
return { data };
});
```
</Expandable>

</SdkApi>

## Instrumenting Server Routes

<SdkApi
name="wrapServerRouteWithSentry"
signature={`function wrapServerRouteWithSentry<T extends RequestEvent>(
originalRouteHandler: (request: T) => Promise<Response>
): (requestEvent: T) => Promise<Response>`}
>
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.

<Expandable title="Examples">
```javascript
import { wrapServerRouteWithSentry } from "@sentry/sveltekit";

export const GET = wrapServerRouteWithSentry(async () => {
// your endpoint logic
return new Response("Hello World");
});
```
</Expandable>
</SdkApi>

</PlatformSection>

<PlatformSection supported={["javascript.nextjs"]}>
## Server Actions

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

<TableOfContents ignoreIds={["available-options"]} />

## Source Maps Options

<SdkOption name="sourceMapsUploadOptions.org" type="string" envVar="SENTRY_ORG">

The slug of the Sentry organization associated with the app.

</SdkOption>

<SdkOption name="sourceMapsUploadOptions.project" type="string" envVar="SENTRY_PROJECT">

The slug of the Sentry project associated with the app.

</SdkOption>

<SdkOption name="sourceMapsUploadOptions.authToken" type="string" envVar="SENTRY_AUTH_TOKEN">

The authentication token to use for all communication with Sentry. Can be obtained from https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/.

</SdkOption>

<SdkOption name="sourceMapsUploadOptions.url" type="string" envVar="SENTRY_URL" defaultValue="https://sentry.io/">

The base URL of your Sentry instance. Only relevant if you're using a self-hosted or Sentry instance other than sentry.io.

</SdkOption>

<SdkOption name="adapter" type="string">

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.

</SdkOption>

<SdkOption name="autoUploadSourceMaps" type="boolean">

Disable automatic source maps upload by setting `autoUploadSourceMaps` to `false`.

</SdkOption>

## 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.

<Alert>
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.
</Alert>

<SdkOption name="autoInstrument" type="boolean | object" defaultValue="true">

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.

</SdkOption>

<SdkOption name="autoInstrument.load" type="boolean" defaultValue="true">

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
};
```

</SdkOption>

<SdkOption name="autoInstrument.serverLoad" type="boolean" defaultValue="true">

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
};
```

</SdkOption>
2 changes: 2 additions & 0 deletions docs/platforms/javascript/guides/sveltekit/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

<Expandable permalink={false} title="Are you having problems setting up the SDK?">
Expand Down
134 changes: 11 additions & 123 deletions docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<OnboardingOptionButtons
options={["error-monitoring", "performance", "session-replay", "user-feedback", "logs"]}
options={[
"error-monitoring",
"performance",
"session-replay",
"user-feedback",
"logs",
]}
/>

<PlatformContent includePath="getting-started-features-expandable" />
Expand Down Expand Up @@ -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.

<Alert>

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.

</Alert>

#### 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

<Alert>

Available since `8.25.0`

</Alert>

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)

<PlatformContent includePath="getting-started-tunneling" />

## 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.

Expand Down Expand Up @@ -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

<Expandable permalink={false} title="Are you having problems setting up the SDK?">
Expand Down
2 changes: 1 addition & 1 deletion src/components/sdkOption.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function SdkOption({
<OptionDefRow label="Default" value={defaultValue} note={defaultNote} />
)}
<PlatformCategorySection supported={['server', 'serverless']}>
<PlatformSection notSupported={['javascript.nextjs']}>
<PlatformSection notSupported={['javascript.nextjs', 'javascript.sveltekit']}>
{envVar && <OptionDefRow label="ENV Variable" value={envVar} />}
</PlatformSection>
</PlatformCategorySection>
Expand Down
Loading