|
10 | 10 | [](https://www.npmjs.com/package/@sentry/sveltekit)
|
11 | 11 | [](https://www.npmjs.com/package/@sentry/sveltekit)
|
12 | 12 |
|
13 |
| -## Links |
14 |
| - |
15 |
| -- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/sveltekit/) |
16 |
| - |
17 | 13 | ## Compatibility
|
18 | 14 |
|
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 |
20 | 16 | might not generate source maps correctly.
|
21 | 17 |
|
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. |
32 | 19 |
|
33 | 20 | ## General
|
34 | 21 |
|
35 | 22 | This package is a wrapper around `@sentry/node` for the server and `@sentry/svelte` for the client side, with added
|
36 | 23 | functionality related to SvelteKit.
|
37 | 24 |
|
38 |
| -## Automatic Setup |
| 25 | +## Installation |
39 | 26 |
|
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/): |
43 | 29 |
|
44 | 30 | ```sh
|
45 | 31 | npx @sentry/wizard@latest -i sveltekit
|
46 | 32 | ```
|
47 | 33 |
|
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. |
168 | 36 |
|
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 |
331 | 38 |
|
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