SvelteKit Error and Performance Monitoring

Dedicated SvelteKit support is coming soon, check out our SvelteKit GitHub Discussion and help us inspire our SDK team to build faster. Until then, here is how you can use Sentry with SvelteKit. But it is a lot of code, and we don't like that. Coming soon: Sentry + SvelteKit with less code.

Grab the existing Sentry Svelte and Node SDKs:

npm install --save @sentry/svelte @sentry/node @sentry/tracing 

Server-side: configure the Node SDK in src/hooks.server.ts

import * as SentryNode from '@sentry/node';
import '@sentry/tracing';

SentryNode.init({
  dsn: '__DSN__',
  tracesSampleRate: 1.0,
  // Add the Http integration for tracing
  integrations: [new SentryNode.Integrations.Http()]
});

SentryNode.setTag('svelteKit', 'server');

// use handleError to report errors during server-side data loading
export const handleError = (({ error, event }) => {
  SentryNode.captureException(error, { contexts: { sveltekit: { event } } });

  return {
    message: error.message,
  };
}) satisfies HandleServerError;

Client-side: intialize the Svelte SDK in src/hooks.client.ts:

import * as SentrySvelte from '@sentry/svelte';
import { BrowserTracing } from '@sentry/tracing';

SentrySvelte.init({
  dsn: '__DSN__',
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
});

SentrySvelte.setTag('svelteKit', 'browser');

// This will catch errors in load functions from +page.ts files
export const handleError = (({ error, event }) => {
  SentrySvelte.captureException(error, { contexts: { sveltekit: { event } } });

  return {
    message: error.message
  };
}) satisfies HandleClientError;

Limitations

This should provide error monitoring in most situations. Source maps are currently not yet working correctly. However, it should work for many to configure the Vite Plugin.