Skip to content

Commit

Permalink
feat(sveltekit): Document new sentryHandle options (#8768)
Browse files Browse the repository at this point in the history
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Luca Forstner <luca.forstner@sentry.io>
Co-authored-by: vivianyentran <20403606+vivianyentran@users.noreply.github.com>
  • Loading branch information
4 people authored Dec 23, 2023
1 parent bf00e3d commit 8bd148e
Showing 1 changed file with 45 additions and 0 deletions.
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.

1 comment on commit 8bd148e

@vercel
Copy link

@vercel vercel bot commented on 8bd148e Dec 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sentry-docs – ./

sentry-docs-git-master.sentry.dev
docs.sentry.io
sentry-docs.sentry.dev

Please sign in to comment.