diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx index 5d89186a89b0b..310c16c3448ae 100644 --- a/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/sveltekit.mdx @@ -3,7 +3,9 @@ title: Cloudflare Sveltekit Framework Guide description: "Learn how to add Cloudflare instrumentation to your SvelteKit app." --- -If you're running your SvelteKit app on Cloudflare Pages, you can use the Sentry SvelteKit SDK in combination with the Sentry Cloudflare SDK to add Sentry instrumentation. +If you're running your SvelteKit app on Cloudflare Pages, you need to configure the SDK a little differently to the default setup. This guide will show you how to set up the Sentry SvelteKit SDK for Cloudflare Pages. + +## 1. Install the SDK First, install the Sentry SvelteKit SDK in your application. We recommend using the Sentry wizard to automatically install the SDK: @@ -13,9 +15,13 @@ npx @sentry/wizard@latest -i sveltekit If the setup through the wizard doesn't work for you, you can also [set up the SvelteKit SDK manually](/platforms/javascript/guides/sveltekit/manual-setup/). -After installing the Sentry SvelteKit SDK, you can move on to setting up the Cloudflare SDK. First, install the SDK with your package manager: + + +If installed the SDK before, make sure that `@sentry/sveltekit` version `9.2.0` or newer is installed. + + - +## 2. Cloudflare configuration To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.toml`. This is because the SDK needs access to the `AsyncLocalStorage` API to work correctly. @@ -25,13 +31,15 @@ compatibility_flags = ["nodejs_compat"] # compatibility_flags = ["nodejs_als"] ``` -To use this SDK, update your `src/hooks.server.(ts|js)` file to use the `Sentry.wrapRequestHandler` method from the Sentry Cloudflare SDK and remove the `Sentry.init` call from `@sentry/sveltekit`. +## 3. Update Your Server Hooks File + +To use this SDK, update your `src/hooks.server.(ts|js)` file to use the `initCloudflareSentryHandle` method from the Sentry Cloudflare SDK and remove the `Sentry.init` call from `@sentry/sveltekit`. ```typescript diff {filename:hooks.server.(ts|js)} - import { sequence } from "@sveltejs/kit/hooks"; - import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit"; --import * as Sentry from '@sentry/sveltekit'; -+import * as Sentry from "@sentry/cloudflare"; +-import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit"; ++import { handleErrorWithSentry, sentryHandle, initCloudflareSentryHandle } from "@sentry/sveltekit"; ++import { sequence } from "@sveltejs/kit/hooks"; + import * as Sentry from '@sentry/sveltekit'; -Sentry.init({ - dsn: '___PUBLIC_DSN___', @@ -41,26 +49,16 @@ To use this SDK, update your `src/hooks.server.(ts|js)` file to use the `Sentry. - // spotlight: import.meta.env.DEV, -}); - -+const handleInitSentry = ({ event, resolve }) => { -+ return event.platform -+ ? Sentry.wrapRequestHandler( -+ { -+ options: { -+ dsn: '___PUBLIC_DSN___', -+ tracesSampleRate: 1.0, -+ }, -+ request: event.request, -+ context: event.platform.ctx, -+ }, -+ () => resolve(event) -+ ) -+ : resolve(event); -+}; --// If you have custom handlers, make sure to place them after `sentryHandle()` in the `sequence` function. --export const handle = sequence(sentryHandle()); -+export const handle = sequence(handleInitSentry, sentryHandle()); - -export const handleError = handleErrorWithSentry(myErrorHandler); +-export const handle = sentryHandle(); ++export const handle = sequence( ++ initCloudflareSentryHandle({ ++ dsn: '___PUBLIC_DSN___', ++ tracesSampleRate: 1.0, ++ }), ++ sentryHandle() ++); + + export const handleError = handleErrorWithSentry(myErrorHandler); ``` If you need to use environmental variables, you can access them using `event.platform.env`. diff --git a/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx b/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx index b41bf1911ddb6..89fed87e06ca8 100644 --- a/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx +++ b/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx @@ -367,3 +367,8 @@ export const GET = wrapServerRouteWithSentry(async () => { return new Response("Hello World"); }); ``` + +## Cloudflare Pages Configuration + +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/). diff --git a/platform-includes/getting-started-primer/javascript.sveltekit.mdx b/platform-includes/getting-started-primer/javascript.sveltekit.mdx index 833c2722c9a63..a0338ad0ec388 100644 --- a/platform-includes/getting-started-primer/javascript.sveltekit.mdx +++ b/platform-includes/getting-started-primer/javascript.sveltekit.mdx @@ -11,11 +11,12 @@ The SvelteKit SDK is designed to work out of the box with the following SvelteKi - [Adapter-auto](https://kit.svelte.dev/docs/adapter-auto) - for Vercel; other platforms might work but we don't guarantee compatibility at this time. - [Adapter-vercel](https://kit.svelte.dev/docs/adapter-vercel) - only for Node (Lambda) runtimes, not yet Vercel's edge runtime. +- [Adapter-cloudflare](https://kit.svelte.dev/docs/adapter-cloudflare) - supported but requires [additional Setup](/platforms/javascript/guides/cloudflare/frameworks/sveltekit/). - [Adapter-node](https://kit.svelte.dev/docs/adapter-node). Other adapters may work but aren't currently supported. We're looking into extending first-class support to [more adapters](https://kit.svelte.dev/docs/adapters) in the future. -The SvelteKit SDK does not yet work with non-node server runtimes, such as Vercel's edge runtime or Cloudflare Workers. +The SvelteKit SDK does not yet work with all non-node server runtimes, such as Vercel's edge runtime.