Skip to content
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
38 changes: 23 additions & 15 deletions docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ If you don't already have a [client hooks](https://kit.svelte.dev/docs/hooks#sha
At the top of your client hooks file, import and initialize the Sentry SDK as shown in the snippet below. See the [Basic Options](../configuration/options/) page to view other SDK configuration options.
Also, add the `handleErrorWithSentry` function to the [`handleError` hook](https://kit.svelte.dev/docs/hooks#shared-hooks-handleerror):


```javascript {filename:hooks.client.(js|ts)} {1, 3-14, 20}
import * as Sentry from "@sentry/sveltekit";

Expand Down Expand Up @@ -68,7 +67,6 @@ At the top of your server hooks file, import and initialize the Sentry SDK as sh
Add the `handleErrorWithSentry` function to the [`handleError` hook](https://kit.svelte.dev/docs/hooks#shared-hooks-handleerror) and add the Sentry request handler to the [`handle` hook](https://kit.svelte.dev/docs/hooks#server-hooks-handle).
If you're already using your own handler(s), use SvelteKit's [`sequence`](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks-sequence) function to add the Sentry handler _before_ your handler(s).


```javascript {filename:hooks.server.(js|ts)} {1, 3-9, 15, 19}
import * as Sentry from "@sentry/sveltekit";

Expand Down Expand Up @@ -134,7 +132,6 @@ Or, you can set them by passing a `sourceMapsUploadOptions` object to `sentrySve
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
```


```javascript {filename:vite.config.(js|ts)} {7-16}
import { sveltekit } from "@sveltejs/kit/vite";
import { sentrySvelteKit } from "@sentry/sveltekit";
Expand Down Expand Up @@ -260,7 +257,7 @@ export default {
};
```

#### Configure Client-side `fetch` Instrumentation
#### Configure CSP for Client-side `fetch` Instrumentation

<Note>

Expand All @@ -271,32 +268,43 @@ Available since version `7.91.0`
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.(js|ts)}
// Add the nonce to the <script> tag:
export const handle = sentryHandle({ fetchProxyScriptNonce: "<your-nonce>" });
```
To enable the script, add an exception for the `sentryHandle` script by adding the hash of the script to your CSP script source rules.

Then, adjust your [SvelteKit CSP configuration](https://kit.svelte.dev/docs/configuration#csp):
If your CSP is defined in `svelte.config.js`, you can add the hash to the `csp.directives.script-src` array:

```javascript {filename: svelte.config.js} {5}
```javascript {filename:svelte.config.js} {5-7}
const config = {
kit: {
csp: {
directives: {
"script-src": ["nonce-<your-nonce>"],
"script-src": ["sha256-y2WkUILyE4eycy7x+pC0z99aZjTZlWfVwgUAfNc1sY8="], // + rest of your values
},
},
},
};
```

For external CSP configurations, add the following hash to your `script-src` directive:

```txt
'sha256-y2WkUILyE4eycy7x+pC0z99aZjTZlWfVwgUAfNc1sY8='
```

We will not make changes to this script any time soon (in fact, this script will be removed in version 9 of the SDK).

<Note>

Previous versions of this documentation recommended setting a nonce in your `sentryHandle` options.
We no longer recommend this approach due to security concerns with re-using nonces.
Instead, we recommend setting the hash as outlined above.
If you're currently setting `fetchProxyScriptNonce` in your `sentryHandle` options, it will continue to work as expected.

</Note>

##### 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`:
If you don't want to inject the script responsible for instrumenting client-side `fetch` calls, you can disable injection by passing `injectFetchProxyScript: false` to `sentryHandle`:

```javascript {filename:hooks.server.(js|ts)}
export const handle = sentryHandle({ injectFetchProxyScript: false });
Expand Down
Loading