You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat(sveltekit): Document new wrapServerRouteWithSentry wrapper (#10990)
adds documentation for the new `wrapServerRouteWithSentry` function we added in getsentry/sentry-javascript#13247.
---------
Co-authored-by: Nicolas Hrubec <nicolas.hrubec@outlook.com>
Copy file name to clipboardExpand all lines: docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
+69-35Lines changed: 69 additions & 35 deletions
Original file line number
Diff line number
Diff line change
@@ -328,7 +328,7 @@ export default {
328
328
329
329
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.
330
330
331
-
### Configure Auto-Instrumentation
331
+
### Auto-Instrumentation
332
332
333
333
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.
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.
427
+
This script attempts to proxy all client-side `fetch` calls, so that `fetch` calls inside your `load` functions are captured by the SDK.
428
+
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).
429
+
To enable the script, you need to add an exception for the `sentryHandle` script:
430
+
431
+
First, specify your nonce in the `fetchProxyScriptNonce` option in your `sentryHandle` call:
Then, adjust your [SvelteKit CSP configuration](https://kit.svelte.dev/docs/configuration#csp):
419
439
420
-
If you don't want to use auto-instrumentation, you can also manually instrument specific `load` functions with the SDK's `load` function wrappers.
440
+
```javascript {svelte.config.js} {5}
441
+
constconfig= {
442
+
kit: {
443
+
csp: {
444
+
directives: {
445
+
"script-src": ["nonce-<your-nonce>"],
446
+
},
447
+
},
448
+
},
449
+
};
450
+
```
451
+
452
+
##### Disable Client-side `fetch` Proxy Script
453
+
454
+
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`:
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.
461
+
This also means that potential spans created on the server for these `fetch` calls will not be connected to the client-side trace.
462
+
463
+
### Manual Instrumentation
464
+
465
+
Instead or in addition to [Auto Instrumentation](#auto-instrumentation), you can manually instrument certain SvelteKit-specific features with the SDK:
466
+
467
+
#### Instrument `load` Functions
468
+
469
+
SvelteKit's universal and server `load` functions are instrumented automatically by default.
470
+
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.
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.
479
-
This script attempts to proxy all client-side `fetch` calls, so that `fetch` calls inside your `load` functions are captured by the SDK.
480
-
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).
481
-
To enable the script, you need to add an exception for the `sentryHandle` script:
482
-
483
-
First, specify your nonce in the `fetchProxyScriptNonce` option in your `sentryHandle` call:
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`:
exportconst GET =wrapServerRouteWithSentry(async () => {
544
+
// your endpoint logic
545
+
returnnewResponse("Hello World");
546
+
});
510
547
```
511
-
512
-
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.
513
-
This also means that potential spans created on the server for these `fetch` calls will not be connected to the client-side trace.
0 commit comments