The minimum supported version of SvelteKit is 1.0.0
. The SDK works best with Vite 4.2 and newer. Older Vite versions
might not generate source maps correctly.
The SDK supports the following SvelteKit adapters:
-
@sveltejs/adapter-auto
- for Vercel with the Node runtime. Other deployment targets might work but we don't guarantee compatibility. -
@sveltejs/adapter-vercel
- only for Node (Lambda) runtimes, not yet Vercel's edge runtime @sveltejs/adapter-node
If you use the SDK with other adapters, we cannot guarantee that everything works as expected. You might need to manually configure source maps upload. The SDK is currently not compatible with none-Node server runtimes, such as Vercel's Edge runtime or Cloudflare workers.
This package is a wrapper around @sentry/node
for the server and @sentry/svelte
for the client side, with added
functionality related to SvelteKit.
We recommend installing the SDK by running the Sentry wizard in the root directory of your project:
npx @sentry/wizard@latest -i sveltekit
Take a look at the sections below if you want to customize your SDK configuration.
If the setup through the wizard doesn't work for you, you can also set up the SDK manually.
-
Install the Sentry SvelteKit SDK:
# Using npm npm install @sentry/sveltekit # Using yarn yarn add @sentry/sveltekit
The Sentry SvelteKit SDK mostly relies on SvelteKit Hooks to capture error and performance data.
-
If you don't already have a client hooks file, create a new one in
src/hooks.client.(js|ts)
. -
On the top of your
hooks.client.(js|ts)
file, initialize the Sentry SDK:// hooks.client.(js|ts) import * as Sentry from '@sentry/sveltekit'; Sentry.init({ dsn: '__DSN__', tracesSampleRate: 1.0, // For instance, initialize Session Replay: replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, integrations: [Sentry.replayIntegration()], });
-
Add our
handleErrorWithSentry
function to thehandleError
hook:// hooks.client.(js|ts) import { handleErrorWithSentry } from '@sentry/sveltekit'; const myErrorHandler = ({ error, event }) => { console.error('An error occurred on the client side:', error, event); }; export const handleError = handleErrorWithSentry(myErrorHandler); // or alternatively, if you don't have a custom error handler: // export const handleError = handleErrorWithSentry();
-
If you don't already have a server hooks file, create a new one in
src/hooks.server.(js|ts)
. -
On the top of your
hooks.server.(js|ts)
file, initialize the Sentry SDK:// hooks.server.(js|ts) import * as Sentry from '@sentry/sveltekit'; Sentry.init({ dsn: '__DSN__', tracesSampleRate: 1.0, });
-
Add our
handleErrorWithSentry
function to thehandleError
hook:// hooks.server.(js|ts) import { handleErrorWithSentry } from '@sentry/sveltekit'; const myErrorHandler = ({ error, event }) => { console.error('An error occurred on the server side:', error, event); }; export const handleError = handleErrorWithSentry(myErrorHandler); // or alternatively, if you don't have a custom error handler: // export const handleError = handleErrorWithSentry();
-
Add our request handler to the
handle
hook inhooks.server.ts
:// hooks.server.(js|ts) import { sentryHandle } from '@sentry/sveltekit'; export const handle = sentryHandle(); // or alternatively, if you already have a handler defined, use the `sequence` function // see: https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks-sequence // export const handle = sequence(sentryHandle(), yourHandler());
Add sentrySvelteKit
to your Vite plugins in vite.config.(js|ts)
file so that the Sentry SDK can apply build-time
features. Make sure that it is added before the sveltekit
plugin:
// vite.config.(js|ts)
import { sveltekit } from '@sveltejs/kit/vite';
import { sentrySvelteKit } from '@sentry/sveltekit';
export default {
plugins: [sentrySvelteKit(), sveltekit()],
// ... rest of your Vite config
};
This adds the Sentry Vite Plugin to your Vite config to automatically upload source maps to Sentry.
After completing the Vite Setup, the SDK will automatically upload source maps to Sentry, when you
build your project. However, you still need to specify your Sentry auth token as well as your org and project slugs. You
can either set them as env variables (for example in a .env
file):
-
SENTRY_ORG
your Sentry org slug -
SENTRY_PROJECT
your Sentry project slug -
SENTRY_AUTH_TOKEN
your Sentry auth token
Or you can pass them in whatever form you prefer to sentrySvelteKit
:
// vite.config.(js|ts)
import { sveltekit } from '@sveltejs/kit/vite';
import { sentrySvelteKit } from '@sentry/sveltekit';
export default {
plugins: [
sentrySvelteKit({
sourceMapsUploadOptions: {
org: 'my-org-slug',
project: 'my-project-slug',
authToken: process.env.SENTRY_AUTH_TOKEN,
},
}),
sveltekit(),
],
// ... rest of your Vite config
};
Under sourceMapsUploadOptions
, you can also specify all additional options supported by the
Sentry Vite Plugin. This might be useful if you're using adapters
other than the Node adapter or have a more customized build setup.
// vite.config.(js|ts)
import { sveltekit } from '@sveltejs/kit/vite';
import { sentrySvelteKit } from '@sentry/sveltekit';
export default {
plugins: [
sentrySvelteKit({
sourceMapsUploadOptions: {
org: 'my-org-slug',
project: 'my-project-slug',
authToken: process.env.SENTRY_AUTH_TOKEN,
include: ['dist'],
cleanArtifacts: true,
setCommits: {
auto: true,
},
},
}),
sveltekit(),
],
// ... rest of your Vite config
};
If you don't want to upload source maps automatically, you can disable it as follows:
// vite.config.(js|ts)
import { sveltekit } from '@sveltejs/kit/vite';
import { sentrySvelteKit } from '@sentry/sveltekit';
export default {
plugins: [
sentrySvelteKit({
autoUploadSourceMaps: false,
}),
sveltekit(),
],
// ... rest of your Vite config
};
The SDK mostly relies on SvelteKit's hooks to collect error and performance data.
However, SvelteKit doesn't yet offer a hook for universal or server-only load
function calls. Therefore, the SDK uses
a Vite plugin to auto-instrument load
functions so that you don't have to add a Sentry wrapper to each function
manually. Auto-instrumentation is enabled by default, as soon as you add the sentrySvelteKit()
function call to your
vite.config.(js|ts)
. However, you can customize the behavior, or disable it entirely. In this case, you can still
manually wrap specific load
functions with the withSentry
function.
Note: The SDK will only auto-instrument load
functions in +page
or +layout
files that do not yet contain any
Sentry code. If you already have custom Sentry code in such files, you'll have to
manually add our wrapper to your load
functions.
By passing the autoInstrument
option to sentrySvelteKit
you can disable auto-instrumentation entirely, or customize
which load
functions should be instrumented:
// vite.config.(js|ts)
import { sveltekit } from '@sveltejs/kit/vite';
import { sentrySvelteKit } from '@sentry/sveltekit';
export default {
plugins: [
sentrySvelteKit({
autoInstrument: {
load: true, // universal load functions
serverLoad: false, // server-only load functions
},
}),
sveltekit(),
],
// ... rest of your Vite config
};
If you set the autoInstrument
option to false
, the SDK won't auto-instrument any load
function. You can still
manually instrument specific load
functions.
// vite.config.(js|ts)
import { sveltekit } from '@sveltejs/kit/vite';
import { sentrySvelteKit } from '@sentry/sveltekit';
export default {
plugins: [
sentrySvelteKit({
autoInstrument: false;
}),
sveltekit(),
],
// ... rest of your Vite config
};
If you don't want to use auto-instrumentation, you can also manually instrument specific load
functions with our load
function wrappers:
To instrument your universal load
functions in +(page|layout).(js|ts)
, wrap our wrapLoadWithSentry
function around
your load code:
import { wrapLoadWithSentry } from '@sentry/sveltekit';
export const load = wrapLoadWithSentry(event => {
//... your load code
});
To instrument server load
functions in +(page|layout).server.(js|ts)
, wrap our wrapServerLoadWithSentry
function
around your load code:
import { wrapServerLoadWithSentry } from '@sentry/sveltekit';
export const load = wrapServerLoadWithSentry(event => {
//... your server load code
});