Skip to content

feat(sveltekit): Document new sentryHandle options #8768

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 23, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions src/platforms/javascript/guides/sveltekit/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -455,3 +455,48 @@ export const load = wrapServerLoadWithSentry((event) => {
//... your load code
});
```

### 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 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>" });
```

Then, adjust your [SvelteKit CSP configuration](https://kit.svelte.dev/docs/configuration#csp):

```javascript {svelte.config.js}
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.