feat(sveltekit): Document new wrapServerRouteWithSentry wrapper (#1…

…0990)

adds documentation for the new `wrapServerRouteWithSentry` function we added in getsentry/sentry-javascript#13247. 

---------

Co-authored-by: Nicolas Hrubec <[email protected]>

docs/platforms/javascript/guides/sveltekit/manual-setup.mdx

@@ -328,7 +328,7 @@ export default {
 
 If you disable automatic source maps upload, you must explicitly set a `release` value in your `Sentry.init()` configs. You can also skip the `sentry-cli` configuration step below.
 
-### Configure Auto-Instrumentation
+### 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.
 
@@ -415,9 +415,59 @@ export default {
 };
 ```
 
-#### Instrument `load` Functions Manually
+#### Configure Client-side `fetch` Instrumentation
+
+<Note>
+
+Available since version `7.91.0`
+
+</Note>
+
+The `sentryHandle` function you added to your `handle` hook in `hooks.server.ts` during [server-side setup](#server-side-setup) injects an inline `<script>` tag into the HTML response of the server.
+This script attempts to proxy all client-side `fetch` calls, so that `fetch` calls inside your `load` functions are captured by the SDK.
+However, if you configured CSP rules to block inline fetch scripts by default, this script will be [blocked by the browser](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script).
+To enable the script, you need to add an exception for the `sentryHandle` script:
+
+First, specify your nonce in the `fetchProxyScriptNonce` option in your `sentryHandle` call:
+
+```javascript {filename:hooks.server.ts}
+// Add the nonce to the <script> tag:
+export const handle = sentryHandle({ fetchProxyScriptNonce: "<your-nonce>" });
+```
+
+Then, adjust your [SvelteKit CSP configuration](https://kit.svelte.dev/docs/configuration#csp):
 
-If you don't want to use auto-instrumentation, you can also manually instrument specific `load` functions with the SDK's `load` function wrappers.
+```javascript {svelte.config.js} {5}
+const config = {
+  kit: {
+    csp: {
+      directives: {
+        "script-src": ["nonce-<your-nonce>"],
+      },
+    },
+  },
+};
+```
+
+##### Disable Client-side `fetch` Proxy Script
+
+If you do not want to inject the script responsible for instrumenting client-side `load` calls, you can disable injection by passing `injectFetchProxyScript: false` to `sentryHandle`:
+
+```javascript {filename:hooks.server.ts}
+export const handle = sentryHandle({ injectFetchProxyScript: false });
+```
+
+Note that if you disable the `fetch` proxy script, the SDK will not be able to capture spans for `fetch` calls made in your `load` functions on the client.
+This also means that potential spans created on the server for these `fetch` calls will not be connected to the client-side trace.
+
+### 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
 
@@ -467,47 +517,31 @@ export const load = wrapServerLoadWithSentry(({ event }) => {
 });
 ```
 
-#### Configure Client-side `fetch` Instrumentation
+#### Instrument Server Routes
 
 <Note>
 
-Available since version `7.91.0`
+Available since `8.25.0`
 
 </Note>
 
-The `sentryHandle` function you added to your `handle` hook in `hooks.server.ts` during [server-side setup](#server-side-setup) injects a small inline `<script>` tag into the HTML response of the server.
-This script attempts to proxy all client-side `fetch` calls, so that `fetch` calls inside your `load` functions are captured by the SDK.
-However, if you configured CSP rules to block inline fetch scripts by default, this script will be [blocked by the browser](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#unsafe_inline_script).
-To enable the script, you need to add an exception for the `sentryHandle` script:
-
-First, specify your nonce in the `fetchProxyScriptNonce` option in your `sentryHandle` call:
-
-```javascript {filename:hooks.server.ts}
-// Add the nonce to the <script> tag:
-export const handle = sentryHandle({ fetchProxyScriptNonce: "<your-nonce>" });
-```
+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:
 
-Then, adjust your [SvelteKit CSP configuration](https://kit.svelte.dev/docs/configuration#csp):
+```javascript {filename:+server.js} {1,3}
+import { wrapServerRouteWithSentry } from "@sentry/sveltekit";
 
-```javascript {svelte.config.js} {5}
-const config = {
-  kit: {
-    csp: {
-      directives: {
-        "script-src": ["nonce-<your-nonce>"],
-      },
-    },
-  },
-};
+export const GET = wrapServerRouteWithSentry(async () => {
+  // your endpoint logic
+  return new Response("Hello World");
+});
 ```
 
-##### Disable Client-side `fetch` Proxy Script
-
-If you do not want to inject the script responsible for instrumenting client-side `load` calls, you can disable injection by passing `injectFetchProxyScript: false` to `sentryHandle`:
+```typescript {filename:+server.ts} {1,3}
+import { wrapServerRouteWithSentry } from "@sentry/sveltekit";
 
-```javascript {filename:hooks.server.ts}
-export const handle = sentryHandle({ injectFetchProxyScript: false });
+export const GET = wrapServerRouteWithSentry(async () => {
+  // your endpoint logic
+  return new Response("Hello World");
+});
 ```
-
-Note that if you disable the `fetch` proxy script, the SDK will not be able to capture spans for `fetch` calls made in your `load` functions on the client.
-This also means that potential spans created on the server for these `fetch` calls will not be connected to the client-side trace.