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 && }