ref(sveltekit): Adjust Cloudflare setup to only use SvelteKit SDK (#12801)

* ref(sveltekit): Adjust cloudflare setup to only use SvelteKit SDK

* more linking, rewording

* Apply suggestions from code review

Co-authored-by: Alex Krawiec <[email protected]>

---------

Co-authored-by: Alex Krawiec <[email protected]>

Author: 2 people

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:
+<Alert>
+
+If installed the SDK before, make sure that `@sentry/sveltekit` version `9.2.0` or newer is installed.
+
+</Alert>
 
-<PlatformContent includePath="getting-started-install" />
+## 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`.

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

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