Skip to content

Commit 4ef2b39

Browse files
sfanahataShannon Anahatas1gr1d
authored
updating multiple JS frameworks to and more detailed source map info (#14454)
## DESCRIBE YOUR PR - nuxt - add wizard and update walkthrough - browser JS - update walkthrough - sveltekit - add the wizard as an option, update walkthrough - solid start - add wizard and update walkthrough - tanstack - add manual instructions and update walkthrough - cloudflare - add wizard, show updated walkthrough ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.): <!-- ENTER DATE HERE --> - [ ] Other deadline: <!-- ENTER DATE HERE --> - [x] None: Not urgent, can wait up to 1 week+ ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST *Make sure you've checked the following before merging your changes:* - [ ] Checked Vercel preview for correctness, including links - [ ] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) --------- Co-authored-by: Shannon Anahata <[email protected]> Co-authored-by: Sigrid Huemer <[email protected]>
1 parent 1aa24f0 commit 4ef2b39

File tree

11 files changed

+437
-9
lines changed

11 files changed

+437
-9
lines changed

‎docs/platforms/javascript/guides/sveltekit/sourcemaps/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: "Upload your source maps to Sentry to enable readable stack traces
66

77
<PlatformContent includePath="sourcemaps/primer" />
88

9-
<PlatformContent includePath="sourcemaps/upload/primer" />
9+
<PlatformContent includePath="sourcemaps/overview" />
1010

1111
## Additional Resources
1212

‎platform-includes/sourcemaps/overview/javascript.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ The easiest way to configure uploading source maps is by using the Sentry Wizard
44

55
<Include name="sourcemaps-wizard-instructions.mdx" />
66

7+
**Note:** Source maps are only generated and uploaded during **production builds**. Development builds typically do not generate source maps for upload.
8+
79
<PlatformSection supported={['javascript', 'javascript.react']}>
810

911
<Alert>

‎platform-includes/sourcemaps/overview/javascript.nuxt.mdx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
## Uploading Source Maps in a Nuxt Project
2+
3+
`@sentry/nuxt` will generate and upload source maps automatically during production builds, so that errors in Sentry contain readable stack traces.
4+
5+
### Automatic Setup
6+
7+
The easiest way to configure uploading source maps is by using the [Sentry Wizard](/platforms/javascript/guides/nuxt/#step-1-install).
8+
9+
### Manual Configuration
10+
11+
If you installed the SDK manually or the wizard failed, follow the steps below to manually configure source maps upload.
12+
13+
#### 1. Configure Source Maps Upload
14+
15+
To automatically upload source maps, you need to provide your Sentry auth token, organization, and project slugs in your Nuxt configuration:
16+
17+
<OrgAuthTokenNote />
18+
19+
**Make sure you add your auth token to your CI, if you are using one to deploy your application.**
20+
21+
Add your auth token to your environment:
22+
23+
```bash {filename:.env}
24+
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
25+
```
26+
27+
```javascript {filename:nuxt.config.ts}
28+
export default defineNuxtConfig({
29+
modules: ["@sentry/nuxt/module"],
30+
sentry: {
31+
org: "___ORG_SLUG___",
32+
project: "___PROJECT_SLUG___",
33+
authToken: process.env.SENTRY_AUTH_TOKEN,
34+
},
35+
});
36+
```
37+
38+
#### 2. Enable Client-side Source Map Generation
39+
40+
To enable client-side source maps, you need to do so explicitly. Nuxt applies default [source map settings](https://nuxt.com/docs/api/nuxt-config#sourcemap), and the Sentry Nuxt Module respects these when they are defined.
41+
42+
To enable client-side source map generation, add the following to your Nuxt configuration:
43+
44+
```javascript {filename:nuxt.config.ts}
45+
export default defineNuxtConfig({
46+
sourcemap: { client: "hidden" },
47+
});
48+
```
49+
50+
The `hidden` option functions the same as `true`, by enabling source map generation. However, it also suppresses the source map reference comments that normally appear at the end of each generated file in the build output. This option keeps the source maps available without exposing their references in the files.
51+
52+
When you open your browser's developer tools, the browser tries to fetch source maps using the reference comments found in bundled files. If the source maps are uploaded to Sentry and removed from the client side, these references cause 404 errors in the developer tools. The `hidden` option stops these comments from being generated, preventing browsers from trying to fetch missing files and avoiding unnecessary errors.
53+
54+
#### 3. Source Map Options
55+
56+
Configure source map behavior using the [source maps options](/platforms/javascript/guides/nuxt/configuration/build/#source-maps-options) in your Nuxt config:
57+
58+
```javascript {filename:nuxt.config.ts}
59+
export default defineNuxtConfig({
60+
modules: ["@sentry/nuxt/module"],
61+
sentry: {
62+
org: "___ORG_SLUG___",
63+
project: "___PROJECT_SLUG___",
64+
authToken: process.env.SENTRY_AUTH_TOKEN,
65+
},
66+
});
67+
```
68+
69+
### Troubleshooting
70+
71+
If you're experiencing issues with source maps, see [Troubleshooting Source Maps](/platforms/javascript/guides/nuxt/troubleshooting/).

‎platform-includes/sourcemaps/overview/javascript.solidstart.mdx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
## Uploading Source Maps in a SolidStart Project
2+
3+
`@sentry/solidstart` will generate and upload source maps automatically during production builds, so that errors in Sentry contain readable stack traces.
4+
5+
### Automatic Setup
6+
7+
The easiest way to configure uploading source maps is by using the [Sentry Wizard](/platforms/javascript/guides/solidstart/#step-1-install).
8+
9+
### Manual Configuration
10+
11+
If you installed the SDK manually or the wizard failed, follow the steps below to manually configure source maps upload.
12+
13+
#### 1. Configure Source Maps Upload
14+
15+
To automatically upload source maps, you need to provide your Sentry auth token, organization, and project slugs in your SolidStart configuration:
16+
17+
<OrgAuthTokenNote />
18+
19+
**Make sure you add your auth token to your CI, if you are using one to deploy your application.**
20+
21+
Add your auth token to your environment:
22+
23+
```bash {filename:.env}
24+
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
25+
```
26+
27+
```javascript {filename:app.config.ts}
28+
export default defineConfig(
29+
withSentry(
30+
{
31+
/* Your SolidStart config */
32+
},
33+
{
34+
sourceMapsUploadOptions: {
35+
org: "___ORG_SLUG___",
36+
project: "___PROJECT_SLUG___",
37+
authToken: process.env.SENTRY_AUTH_TOKEN,
38+
},
39+
},
40+
),
41+
);
42+
```
43+
44+
#### 2. Source Map Options
45+
46+
Configure source map behavior using the [source maps options](/platforms/javascript/guides/solidstart/configuration/build/#source-maps-options) in your SolidStart config:
47+
48+
```javascript {filename:app.config.ts}
49+
export default defineConfig(
50+
withSentry(
51+
{
52+
/* Your SolidStart config */
53+
},
54+
{
55+
sourceMapsUploadOptions: {
56+
org: "___ORG_SLUG___",
57+
project: "___PROJECT_SLUG___",
58+
authToken: process.env.SENTRY_AUTH_TOKEN,
59+
sourcemaps: {
60+
assets: ["./dist/**/*"],
61+
ignore: ["**/node_modules/**"],
62+
filesToDeleteAfterUpload: ["./dist/**/*.map"],
63+
},
64+
},
65+
},
66+
),
67+
);
68+
```
69+
70+
### Disable Source Maps Upload
71+
72+
You can disable automatic source maps upload in your SolidStart configuration:
73+
74+
```javascript {filename:app.config.ts}
75+
export default defineConfig(
76+
withSentry(
77+
{
78+
/* Your SolidStart config */
79+
},
80+
{
81+
sourceMapsUploadOptions: {
82+
enabled: false,
83+
},
84+
},
85+
),
86+
);
87+
```
88+
89+
**Note:** Source maps are only generated and uploaded during **production builds** (`npm run build`). Development builds (`npm run dev`) do not generate source maps for upload.
90+
91+
### Troubleshooting
92+
93+
If you're experiencing issues with source maps, see [Troubleshooting Source Maps](/platforms/javascript/guides/solidstart/troubleshooting/).

‎platform-includes/sourcemaps/overview/javascript.sveltekit.mdx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
## Uploading Source Maps in a SvelteKit Project
2+
3+
`@sentry/sveltekit` will generate and upload source maps automatically during production builds, so that errors in Sentry contain readable stack traces.
4+
5+
### Automatic Setup
6+
7+
The easiest way to configure uploading source maps is by using the [Sentry Wizard](/platforms/javascript/guides/sveltekit/#step-1-install).
8+
9+
```bash
10+
npx @sentry/wizard@latest -i sveltekit
11+
```
12+
13+
**Note:** Source maps are only generated and uploaded during **production builds** (`npm run build`). Development builds (`npm run dev`) do not generate source maps for upload.
14+
15+
See how uploading source maps lets you see the exact line of code that caused an error:
16+
17+
<Arcade src="https://demo.arcade.software/OFrHpZUU739XKR8qUiEP?embed" />
18+
19+
### Manual Configuration
20+
21+
If you installed the SDK manually or the wizard failed, follow the steps below to manually configure source maps upload.
22+
23+
#### 1. Configure Source Maps Upload
24+
25+
To automatically upload source maps, you need to provide your Sentry auth token, organization, and project slugs in your Vite configuration:
26+
27+
<OrgAuthTokenNote />
28+
29+
**Make sure you add your auth token to your CI, if you are using one to deploy your application.**
30+
31+
Add your auth token to your environment:
32+
33+
```bash {filename:.env}
34+
SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
35+
```
36+
37+
```javascript {filename:vite.config.js}
38+
import { sveltekit } from "@sveltejs/kit/vite";
39+
import { sentrySvelteKit } from "@sentry/sveltekit";
40+
41+
export default defineConfig({
42+
plugins: [
43+
sentrySvelteKit({
44+
sourceMapsUploadOptions: {
45+
org: "___ORG_SLUG___",
46+
project: "___PROJECT_SLUG___",
47+
authToken: process.env.SENTRY_AUTH_TOKEN,
48+
},
49+
}),
50+
sveltekit(),
51+
],
52+
});
53+
```
54+
55+
#### 2. Source Map Options
56+
57+
Configure source map behavior using the [source maps options](/platforms/javascript/guides/sveltekit/configuration/build/#source-maps-options) in your Vite config:
58+
59+
```javascript {filename:vite.config.js}
60+
import { sveltekit } from "@sveltejs/kit/vite";
61+
import { sentrySvelteKit } from "@sentry/sveltekit";
62+
63+
export default defineConfig({
64+
plugins: [
65+
sentrySvelteKit({
66+
sourceMapsUploadOptions: {
67+
org: "___ORG_SLUG___",
68+
project: "___PROJECT_SLUG___",
69+
authToken: process.env.SENTRY_AUTH_TOKEN,
70+
},
71+
}),
72+
sveltekit(),
73+
],
74+
});
75+
```
76+
77+
### Override Adapter Detection
78+
79+
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:
80+
81+
```javascript {filename:vite.config.js}
82+
import { sveltekit } from "@sveltejs/kit/vite";
83+
import { sentrySvelteKit } from "@sentry/sveltekit";
84+
85+
export default defineConfig({
86+
plugins: [
87+
sentrySvelteKit({
88+
adapter: "vercel",
89+
}),
90+
sveltekit(),
91+
],
92+
});
93+
```
94+
95+
### Disable Source Maps Upload
96+
97+
You can disable automatic source maps upload in your Vite config:
98+
99+
```javascript {filename:vite.config.js}
100+
import { sveltekit } from "@sveltejs/kit/vite";
101+
import { sentrySvelteKit } from "@sentry/sveltekit";
102+
103+
export default defineConfig({
104+
plugins: [
105+
sentrySvelteKit({
106+
autoUploadSourceMaps: false,
107+
}),
108+
sveltekit(),
109+
],
110+
});
111+
```
112+
113+
### Troubleshooting
114+
115+
If you're experiencing issues with source maps, see [Troubleshooting Source Maps](/platforms/javascript/guides/sveltekit/troubleshooting/).

0 commit comments

Comments
 (0)