-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
Changes from 6 commits
fc633d4
d6b30b9
296515c
fb1d451
d632f2d
cbaa988
5bccb63
d938d87
7c2f2e7
475781d
395ee0d
7e85d05
f6a01a9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,7 +16,12 @@ 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"]} | ||
| options={[ | ||
| "error-monitoring", | ||
| "performance", | ||
| "session-replay", | ||
| "user-feedback", | ||
| ]} | ||
| /> | ||
|
|
||
| <PlatformContent includePath="getting-started-features-expandable" /> | ||
|
|
@@ -206,131 +211,16 @@ 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) | ||
| ## Step 4: 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 5: Avoid Ad Blockers With Tunneling (Optional) | ||
|
|
||
| <PlatformContent includePath="getting-started-tunneling" /> | ||
|
|
||
| ## Step 7: Verify Your Setup | ||
| ## Step 6: Verify Your Setup | ||
|
|
||
| Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. | ||
|
|
||
|
|
@@ -414,6 +304,7 @@ 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 | ||
| - 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?"> | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.