Skip to content

Commit 3e00895

Browse files
inventarSarahinventarSarah
committed
PR feedback
1 parent aa7f6e2 commit 3e00895

File tree

2 files changed

+59
-47
lines changed

2 files changed

+59
-47
lines changed

‎docs/platforms/javascript/common/troubleshooting/index.mdx‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -95,58 +95,61 @@ Most community CDNs properly set an `Access-Control-Allow-Origin` header.
9595

9696
<PlatformSection supported={["javascript.sveltekit"]}>
9797

98-
<Expandable permalink title="Configure CSP for Client-side `fetch` Instrumentation">
98+
<Expandable permalink title="Configure CSP for Client-side `fetch` Instrumentation">
9999

100-
<Alert>
101-
Only relevant for SvelteKit versions below `@sveltejs/[email protected]`
102-
</Alert>
103-
If you're using a SvelteKit version older than `sveltejs/[email protected]`, the Sentry SDK injects an inline `<script>` tag into the HTML response of the server.
104-
This script proxies all client-side `fetch` calls so that `fetch` calls inside your `load` functions are captured by the SDK.
105-
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).
100+
<Alert>
101+
Only relevant for SvelteKit versions below `@sveltejs/[email protected]`
102+
</Alert>
103+
If you're using a SvelteKit version older than `sveltejs/[email protected]`, the Sentry SDK injects an inline `<script>` tag into the HTML response of the server.
104+
This script proxies all client-side `fetch` calls so that `fetch` calls inside your `load` functions are captured by the SDK.
105+
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).
106106

107-
You have multiple options to solve this CSP issue:
107+
You have multiple options to solve this CSP issue:
108108

109-
#### Option 1: Upgrade SvelteKit
109+
#### Option 1: Upgrade SvelteKit
110110

111-
The easiest option is to update `@sveltejs/kit` to at least version `2.16.0` (or newer). The SDK will not inject the fetch proxy script as it's no longer necessary.
111+
The easiest option is to update `@sveltejs/kit` to at least version `2.16.0` (or newer). The SDK will not inject the fetch proxy script as it's no longer necessary.
112112

113-
#### Option 2: Add Script Hash to CSP policy
113+
#### Option 2: Add Script Hash to CSP policy
114114

115-
To enable the script, add an exception for the `sentryHandle` script by adding the hash of the script to your CSP script source rules.
115+
To enable the script, add an exception for the `sentryHandle` script by adding the hash of the script to your CSP script source rules.
116116

117-
If your CSP is defined in `svelte.config.js`, you can add the hash to the `csp.directives.script-src` array:
117+
If your CSP is defined in `svelte.config.js`, you can add the hash to the `csp.directives.script-src` array:
118118

119-
```javascript {filename:svelte.config.js} {5-7}
120-
const config = {
121-
kit: {
122-
csp: {
123-
directives: {
124-
"script-src": ["sha256-y2WkUILyE4eycy7x+pC0z99aZjTZlWfVwgUAfNc1sY8="], // + rest of your values
125-
},
126-
},
127-
},
128-
};
129-
```
119+
```javascript {filename:svelte.config.js} {5-7}
120+
const config = {
121+
kit: {
122+
csp: {
123+
directives: {
124+
"script-src": ["sha256-y2WkUILyE4eycy7x+pC0z99aZjTZlWfVwgUAfNc1sY8="], // + rest of your values
125+
},
126+
},
127+
},
128+
};
129+
```
130130

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

133-
```txt
134-
'sha256-y2WkUILyE4eycy7x+pC0z99aZjTZlWfVwgUAfNc1sY8='
135-
```
136-
<Alert>
137-
We will not change this script any time soon, so the hash will stay consistent.
138-
</Alert>
133+
```txt
134+
'sha256-y2WkUILyE4eycy7x+pC0z99aZjTZlWfVwgUAfNc1sY8='
135+
```
136+
137+
<Alert>
138+
We will not change this script any time soon, so the hash will stay
139+
consistent.
140+
</Alert>
139141

140-
#### Option 3: Disable `fetch` Proxy Script
141-
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`:
142+
#### Option 3: Disable `fetch` Proxy Script
142143

143-
```javascript {filename:hooks.server.(js|ts)}
144-
export const handle = sentryHandle({ injectFetchProxyScript: false });
145-
```
144+
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`:
146145

147-
Note that if you disable the `fetch` proxy script, the SDK will not be able to capture spans for `fetch` calls made by SvelteKit when your route has a server load function. This also means that potential spans created on the server for these `fetch` calls will not be connected to the client-side trace.
146+
```javascript {filename:hooks.server.(js|ts)}
147+
export const handle = sentryHandle({ injectFetchProxyScript: false });
148+
```
149+
150+
Note that if you disable the `fetch` proxy script, the SDK will not be able to capture spans for `fetch` calls made by SvelteKit when your route has a server load function. This also means that potential spans created on the server for these `fetch` calls will not be connected to the client-side trace.
148151

149-
</Expandable>
152+
</Expandable>
150153

151154
</PlatformSection>
152155

‎platform-includes/sourcemaps/upload/primer/javascript.sveltekit.mdx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
### Source Maps Upload
22

3-
By default, `sentrySvelteKit()` will add an instance of the Sentry Vite Plugin, to upload source maps for both server and client builds. This means that when you run a production build (`npm run build`), source maps will be generated and uploaded to Sentry so that you get readable stack traces in your Sentry issues.
3+
By default, the `sentrySvelteKit()` Vite plugin uploads source maps for both server and client builds. This means that when you run a production build (`npm run build`), source maps will be generated and uploaded to Sentry so that you get readable stack traces in your Sentry issues.
44

55
However, you still need to specify your Sentry auth token as well as your org and project slugs.
66
There are two ways to set them:
77

88
**Option 1**
99

10-
You can set them as environment variables, for example, in a `.env` file:
10+
You can set all values as environment variables, for example, in a `.env` file:
1111

12-
- `SENTRY_ORG` your Sentry org slug
13-
- `SENTRY_PROJECT` your Sentry project slug
14-
- `SENTRY_AUTH_TOKEN` your Sentry auth token (can be obtained from the [Organization Token Settings](https://sentry.io/orgredirect/organizations/:orgslug/settings/auth-tokens/))
15-
- `SENTRY_URL` your Sentry instance URL. This is only required if you use your own Sentry instance (as opposed to `https://sentry.io`).
12+
```bash {filename: .env}
13+
# DO NOT commit this file to your repo. The auth token is a secret.
14+
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
15+
SENTRY_ORG=___ORG_SLUG___
16+
SENTRY_PROJECT=___PROJECT_SLUG___
17+
# SENTRY_URL is only necessary if you're using a self-hosted Sentry
18+
# instance (as opposed to `https://sentry.io`)
19+
SENTRY_URL="https://your-sentry-instance.com"
20+
```
1621

17-
**Option 2:**
22+
**Option 2**
1823

19-
You can also set them by passing a `sourceMapsUploadOptions` object to `sentrySvelteKit`, as seen in the example below. For a full list of available options, see the [Sentry Vite Plugin documentation](https://www.npmjs.com/package/@sentry/vite-plugin#options).
24+
You can also set your org and project slugs by passing a `sourceMapsUploadOptions` object to `sentrySvelteKit`, as seen in the example below. For a full list of available options, see the [Sentry Vite Plugin documentation](https://www.npmjs.com/package/@sentry/vite-plugin#options).
2025

2126
<OrgAuthTokenNote />
2227

@@ -30,7 +35,7 @@ export default {
3035
sourceMapsUploadOptions: {
3136
org: "___ORG_SLUG___",
3237
project: "___PROJECT_SLUG___",
33-
authToken: "___ORG_AUTH_TOKEN___",
38+
authToken: "process.env.SENTRY_AUTH_TOKEN",
3439
// If you're self-hosting Sentry, also add your instance URL:
3540
// url: "https://your-self-hosted-sentry.com/",
3641
},
@@ -41,6 +46,10 @@ export default {
4146
};
4247
```
4348

49+
<Alert level="warning" title="Important">
50+
To keep your auth token secure, always store it in an environment variable
51+
instead of directly in your files.
52+
</Alert>
4453
### Override SvelteKit Adapter Detection
4554

4655
By default, `sentrySvelteKit` will try to detect your SvelteKit adapter to configure the source maps upload correctly. If you're not using one of the [supported adapters](/platforms/javascript/guides/sveltekit) or the wrong one is detected, you can override the adapter detection by passing the `adapter` option to `sentrySvelteKit`:

0 commit comments

Comments
 (0)