Skip to content

Commit 5118f59

Browse files
authored
doc(sveltekit): Streamline Readme and remove outdated information (#16824)
This PR updates the SvelteKit Readme, as it contained outdated information (reported via #16818). I decided to remove most of the manual setup and adapter requirements because this is just duplicated information bound to diverge again from docs. The readme is now more minimal, aligning it with the NextJS readme mostly.
1 parent ab6b70f commit 5118f59

File tree

1 file changed

+12
-305
lines changed

1 file changed

+12
-305
lines changed

packages/sveltekit/README.md

Lines changed: 12 additions & 305 deletions
Original file line numberDiff line numberDiff line change
@@ -10,326 +10,33 @@
1010
[![npm dm](https://img.shields.io/npm/dm/@sentry/sveltekit.svg)](https://www.npmjs.com/package/@sentry/sveltekit)
1111
[![npm dt](https://img.shields.io/npm/dt/@sentry/sveltekit.svg)](https://www.npmjs.com/package/@sentry/sveltekit)
1212

13-
## Links
14-
15-
- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/sveltekit/)
16-
1713
## Compatibility
1814

19-
The minimum supported version of SvelteKit is `1.0.0`. The SDK works best with Vite 4.2 and newer. Older Vite versions
15+
The minimum supported version of SvelteKit is `2.0.0`. The SDK works best with Vite 4.2 and newer. Older Vite versions
2016
might not generate source maps correctly.
2117

22-
The SDK supports the following SvelteKit adapters:
23-
24-
- `@sveltejs/adapter-auto` - for Vercel with the Node runtime. Other deployment targets might work but we don't
25-
guarantee compatibility.
26-
- `@sveltejs/adapter-vercel` - only for Node (Lambda) runtimes, not yet Vercel's edge runtime
27-
- `@sveltejs/adapter-node`
28-
29-
If you use the SDK with other adapters, we cannot guarantee that everything works as expected. You might need to
30-
[manually configure source maps upload](#-configuring-source-maps-upload). The SDK is currently not compatible with
31-
none-Node server runtimes, such as Vercel's Edge runtime or Cloudflare workers.
18+
Check our docs for [SvelteKit adapter](https://docs.sentry.io/platforms/javascript/guides/sveltekit/#prerequisites) compatibility.
3219

3320
## General
3421

3522
This package is a wrapper around `@sentry/node` for the server and `@sentry/svelte` for the client side, with added
3623
functionality related to SvelteKit.
3724

38-
## Automatic Setup
25+
## Installation
3926

40-
We recommend installing the SDK by running the
41-
[Sentry wizard](https://docs.sentry.io/platforms/javascript/guides/sveltekit/#install) in the root directory of your
42-
project:
27+
To get started installing the SDK, use the Sentry Next.js Wizard by running the following command in your terminal or
28+
read the [Getting Started Docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/):
4329

4430
```sh
4531
npx @sentry/wizard@latest -i sveltekit
4632
```
4733

48-
Take a look at the sections below if you want to customize your SDK configuration.
49-
50-
## Manual Setup
51-
52-
If the setup through the wizard doesn't work for you, you can also set up the SDK manually.
53-
54-
### 1. Prerequesits & Installation
55-
56-
1. Install the Sentry SvelteKit SDK:
57-
58-
```bash
59-
# Using npm
60-
npm install @sentry/sveltekit
61-
62-
# Using yarn
63-
yarn add @sentry/sveltekit
64-
```
65-
66-
### 2. Client-side Setup
67-
68-
The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.dev/docs/hooks) to capture error and
69-
performance data.
70-
71-
1. If you don't already have a client hooks file, create a new one in `src/hooks.client.(js|ts)`.
72-
73-
2. On the top of your `hooks.client.(js|ts)` file, initialize the Sentry SDK:
74-
75-
```javascript
76-
// hooks.client.(js|ts)
77-
import * as Sentry from '@sentry/sveltekit';
78-
79-
Sentry.init({
80-
dsn: '__DSN__',
81-
tracesSampleRate: 1.0,
82-
// For instance, initialize Session Replay:
83-
replaysSessionSampleRate: 0.1,
84-
replaysOnErrorSampleRate: 1.0,
85-
integrations: [Sentry.replayIntegration()],
86-
});
87-
```
88-
89-
3. Add our `handleErrorWithSentry` function to the `handleError` hook:
90-
91-
```javascript
92-
// hooks.client.(js|ts)
93-
import { handleErrorWithSentry } from '@sentry/sveltekit';
94-
95-
const myErrorHandler = ({ error, event }) => {
96-
console.error('An error occurred on the client side:', error, event);
97-
};
98-
99-
export const handleError = handleErrorWithSentry(myErrorHandler);
100-
// or alternatively, if you don't have a custom error handler:
101-
// export const handleError = handleErrorWithSentry();
102-
```
103-
104-
### 3. Server-side Setup
105-
106-
1. If you don't already have a server hooks file, create a new one in `src/hooks.server.(js|ts)`.
107-
108-
2. On the top of your `hooks.server.(js|ts)` file, initialize the Sentry SDK:
109-
110-
```javascript
111-
// hooks.server.(js|ts)
112-
import * as Sentry from '@sentry/sveltekit';
113-
114-
Sentry.init({
115-
dsn: '__DSN__',
116-
tracesSampleRate: 1.0,
117-
});
118-
```
119-
120-
3. Add our `handleErrorWithSentry` function to the `handleError` hook:
121-
122-
```javascript
123-
// hooks.server.(js|ts)
124-
import { handleErrorWithSentry } from '@sentry/sveltekit';
125-
126-
const myErrorHandler = ({ error, event }) => {
127-
console.error('An error occurred on the server side:', error, event);
128-
};
129-
130-
export const handleError = handleErrorWithSentry(myErrorHandler);
131-
// or alternatively, if you don't have a custom error handler:
132-
// export const handleError = handleErrorWithSentry();
133-
```
134-
135-
4. Add our request handler to the `handle` hook in `hooks.server.ts`:
136-
137-
```javascript
138-
// hooks.server.(js|ts)
139-
import { sentryHandle } from '@sentry/sveltekit';
140-
141-
export const handle = sentryHandle();
142-
// or alternatively, if you already have a handler defined, use the `sequence` function
143-
// see: https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks-sequence
144-
// export const handle = sequence(sentryHandle(), yourHandler());
145-
```
146-
147-
### 4. Vite Setup
148-
149-
Add `sentrySvelteKit` to your Vite plugins in `vite.config.(js|ts)` file so that the Sentry SDK can apply build-time
150-
features. Make sure that it is added _before_ the `sveltekit` plugin:
151-
152-
```javascript
153-
// vite.config.(js|ts)
154-
import { sveltekit } from '@sveltejs/kit/vite';
155-
import { sentrySvelteKit } from '@sentry/sveltekit';
156-
157-
export default {
158-
plugins: [sentrySvelteKit(), sveltekit()],
159-
// ... rest of your Vite config
160-
};
161-
```
162-
163-
This adds the
164-
[Sentry Vite Plugin](https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/vite-plugin) to
165-
your Vite config to automatically upload source maps to Sentry.
166-
167-
---
34+
The wizard will guide you throuhg logging in to Sentry and setting up the SDK. After the wizard setup is completed, the SDK will automatically capture
35+
unhandled errors, and optionally, traces and replays.
16836

169-
## Uploading Source Maps
170-
171-
After completing the [Vite Setup](#5-vite-setup), the SDK will automatically upload source maps to Sentry, when you
172-
build your project. However, you still need to specify your Sentry auth token as well as your org and project slugs. You
173-
can either set them as env variables (for example in a `.env` file):
174-
175-
- `SENTRY_ORG` your Sentry org slug
176-
- `SENTRY_PROJECT` your Sentry project slug
177-
- `SENTRY_AUTH_TOKEN` your Sentry auth token
178-
179-
Or you can pass them in whatever form you prefer to `sentrySvelteKit`:
180-
181-
```js
182-
// vite.config.(js|ts)
183-
import { sveltekit } from '@sveltejs/kit/vite';
184-
import { sentrySvelteKit } from '@sentry/sveltekit';
185-
186-
export default {
187-
plugins: [
188-
sentrySvelteKit({
189-
sourceMapsUploadOptions: {
190-
org: 'my-org-slug',
191-
project: 'my-project-slug',
192-
authToken: process.env.SENTRY_AUTH_TOKEN,
193-
},
194-
}),
195-
sveltekit(),
196-
],
197-
// ... rest of your Vite config
198-
};
199-
```
200-
201-
### Configuring Source maps upload
202-
203-
Under `sourceMapsUploadOptions`, you can also specify all additional options supported by the
204-
[Sentry Vite Plugin](https://www.npmjs.com/package/@sentry/vite-plugin). This might be useful if you're using adapters
205-
other than the Node adapter or have a more customized build setup.
206-
207-
```js
208-
// vite.config.(js|ts)
209-
import { sveltekit } from '@sveltejs/kit/vite';
210-
import { sentrySvelteKit } from '@sentry/sveltekit';
211-
212-
export default {
213-
plugins: [
214-
sentrySvelteKit({
215-
sourceMapsUploadOptions: {
216-
org: 'my-org-slug',
217-
project: 'my-project-slug',
218-
authToken: process.env.SENTRY_AUTH_TOKEN,
219-
include: ['dist'],
220-
cleanArtifacts: true,
221-
setCommits: {
222-
auto: true,
223-
},
224-
},
225-
}),
226-
sveltekit(),
227-
],
228-
// ... rest of your Vite config
229-
};
230-
```
231-
232-
### Disabling automatic source map upload
233-
234-
If you don't want to upload source maps automatically, you can disable it as follows:
235-
236-
```js
237-
// vite.config.(js|ts)
238-
import { sveltekit } from '@sveltejs/kit/vite';
239-
import { sentrySvelteKit } from '@sentry/sveltekit';
240-
241-
export default {
242-
plugins: [
243-
sentrySvelteKit({
244-
autoUploadSourceMaps: false,
245-
}),
246-
sveltekit(),
247-
],
248-
// ... rest of your Vite config
249-
};
250-
```
251-
252-
## Configure Auto-Instrumentation
253-
254-
The SDK mostly relies on [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks) to collect error and performance data.
255-
However, SvelteKit doesn't yet offer a hook for universal or server-only `load` function calls. Therefore, the SDK uses
256-
a Vite plugin to auto-instrument `load` functions so that you don't have to add a Sentry wrapper to each function
257-
manually. Auto-instrumentation is enabled by default, as soon as you add the `sentrySvelteKit()` function call to your
258-
`vite.config.(js|ts)`. However, you can customize the behavior, or disable it entirely. In this case, you can still
259-
manually wrap specific `load` functions with the `withSentry` function.
260-
261-
Note: The SDK will only auto-instrument `load` functions in `+page` or `+layout` files that do not yet contain any
262-
Sentry code. If you already have custom Sentry code in such files, you'll have to
263-
[manually](#instrument-load-functions-manually) add our wrapper to your `load` functions.
264-
265-
### Customize Auto-instrumentation
266-
267-
By passing the `autoInstrument` option to `sentrySvelteKit` you can disable auto-instrumentation entirely, or customize
268-
which `load` functions should be instrumented:
269-
270-
```javascript
271-
// vite.config.(js|ts)
272-
import { sveltekit } from '@sveltejs/kit/vite';
273-
import { sentrySvelteKit } from '@sentry/sveltekit';
274-
275-
export default {
276-
plugins: [
277-
sentrySvelteKit({
278-
autoInstrument: {
279-
load: true, // universal load functions
280-
serverLoad: false, // server-only load functions
281-
},
282-
}),
283-
sveltekit(),
284-
],
285-
// ... rest of your Vite config
286-
};
287-
```
288-
289-
### Disable Auto-instrumentation
290-
291-
If you set the `autoInstrument` option to `false`, the SDK won't auto-instrument any `load` function. You can still
292-
[manually instrument](#instrument-load-functions-manually) specific `load` functions.
293-
294-
```javascript
295-
// vite.config.(js|ts)
296-
import { sveltekit } from '@sveltejs/kit/vite';
297-
import { sentrySvelteKit } from '@sentry/sveltekit';
298-
299-
export default {
300-
plugins: [
301-
sentrySvelteKit({
302-
autoInstrument: false;
303-
}),
304-
sveltekit(),
305-
],
306-
// ... rest of your Vite config
307-
};
308-
```
309-
310-
### Instrument `load` Functions Manually
311-
312-
If you don't want to use auto-instrumentation, you can also manually instrument specific `load` functions with our load
313-
function wrappers:
314-
315-
To instrument your universal `load` functions in `+(page|layout).(js|ts)`, wrap our `wrapLoadWithSentry` function around
316-
your load code:
317-
318-
```javascript
319-
import { wrapLoadWithSentry } from '@sentry/sveltekit';
320-
321-
export const load = wrapLoadWithSentry(event => {
322-
//... your load code
323-
});
324-
```
325-
326-
To instrument server `load` functions in `+(page|layout).server.(js|ts)`, wrap our `wrapServerLoadWithSentry` function
327-
around your load code:
328-
329-
```javascript
330-
import { wrapServerLoadWithSentry } from '@sentry/sveltekit';
37+
## Links
33138

332-
export const load = wrapServerLoadWithSentry(event => {
333-
//... your server load code
334-
});
335-
```
39+
- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/sveltekit/)
40+
- [Sentry.io](https://sentry.io/?utm_source=github&utm_medium=npm_sveltekit)
41+
- [Sentry Discord Server](https://discord.gg/Ww9hbqr)
42+
- [Stack Overflow](https://stackoverflow.com/questions/tagged/sentry)

0 commit comments

Comments
 (0)