SvelteKit Support

[AbhiPrasad]

Update: The Sentry SvelteKit SDK has been released!

Hey! Sentry has released a Svelte SDK, but the SDK doesn't have first class support for SvelteKit. If you would like to see this happen, please leave a comment/reaction to this post!

Svelte SDK: https://www.npmjs.com/package/@sentry/svelte

Svelte SDK Initial Roadmap: #5492

Coming Soon Page for SvelteKit

TLDR: Below how to set up with Svelte and Node SDKs

[andreasnuesslein]

I would like a lot the aforementioned SvelteKit support :)

Until then, do you have a small quick-n-dirty howto to get it running economy class style?

[AbhiPrasad]

You would probably have to run @sentry/node for the server-side parts, so have two Sentry.init calls (@sentry/svelte on the client, @sentry/node on the server). That should make everything work for the basics.

Then figuring out attaching sveltekit specific context/tags on sentry events, uploading source maps for server/client, performance monitoring on the server will be a little more involved, but is what you can look at next.

[jerriclynsjohn]

Use toucan-js to call sentry.init in the server for anyone using @sveltejs/adapter-cloudflare

[var-arora]

Would be great to have SvelteKit support!

[smeubank]

SvelteKit is in release candidate phase for 1.0. Once this is out, and stable, I think it is fair for us/Sentry to consider providing first class support. So we would just need to define what that is exactly.

Should it work through the node package, similar to NextJS?

• Source map uploads
• SvelteKit context specifics
• Server-side performance monitoring

These are all with a question mark. Curious what would be the most important/most valuable for Svelte devs to see in Sentry

[thenbe]

Just posting my experience intergrating Sentry with sveltekit. I was able to make most of the sentry features work (tracing between server & client, accurate sourcemaps for server & client). The most challenging thing I faced was properly uploading source maps and having them accurately map to my source code.

I was able to get them to work by using using sorcery to flatten the final sourcemaps from vite output all the way back to my source code (I use adapter-node). The benefits of this approach is that it enables sentry to map stack traces accurately on both server & client. The downside is it can take as much time to flatten the sourcemaps as it does to build the project, so it can be a bit slow on CI.

And because Vite uses hashed names, it forces you to upload the same instance you build, otherwise the hash might change (aka you can't build on ci then flatten + upload sourcemaps locally as there's a chance the hashes won't match). Although I'm not super familiar with vite so there's a probably better solution to this that I'm not aware of.

[AbhiPrasad]

Is your work open sourced @ambiguous48? Perhaps we can base an initial implementation off what you did (with all credits being give to you of course).

Also, thanks for the extra context on the sourcemaps issues - will keep this in mind.

[thenbe]

Unfortunately the repo I'm working on atm isn't open source, but I can try to post the sentry logic I used in an example that is open source if you feel it might help.

In the meantime however, the other thing that might be sveltekit-specific (besides sourcemaps) is the usage of the sentry client(s) between client & server. I used vite-plugin-iso-import for extra control. Here is a note about it in the sveltekit FAQ.

For files that could potentially be used on both server and client, it lets you do something like this:

import * as SentryNode from '@sentry/node?server'; // will only be imported server-side
import * as SentrySvelte from '@sentry/svelte?client'; // will only be imported client-side
import { BrowserTracing } from '@sentry/tracing?client'; // will only be imported client-side

if (import.meta.env.SSR) {
  SentryNode.whatever();
} else {
  SentrySvelte.whatever();
}

---

Note: a couple of steps are required to have intellisense work properly when you use the vite-plugin-iso-import plugin.

// tsconfig.json
{
    // ...	
    "plugins": [{ "name": "vite-plugin-iso-import" }]
}

// src/app.d.ts

// vite-plugin-iso-import intellisense workaround (needed for .svelte files & svelte-check cli)
// https://github.com/bluwy/vite-plugin-iso-import#using-client-and-server-loses-intellisense

declare module '@sentry/svelte?client' {
	import all from '@sentry/svelte';
	export = all;
}

declare module '@sentry/tracing?client' {
	import * as all from '@sentry/tracing';
	export = all;
}

declare module '@sentry/node?server' {
	import * as all from '@sentry/node';
	export = all;
}

[AbhiPrasad]

I can try to post the sentry logic I used in an example that is open source if you feel it might help

That would be great if you get the chance!

[rohanrajpal]

I was also wondering atleast a small guide to enable sourcemaps & a clean client + server setup for sveltekit. Hopefully I'll make one if I get some time in the coming weeks.

[AbhiPrasad]

For those who are following this issue and need help with sourcemaps, we recently revamped our support here. We now have bundler plugins for vite, esbuild, and rollup, alongside our trusty webpack plugin, so hopefully this should help simplify the process of uploading and getting them working!

https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/

[smeubank]

SvelteKit 1.0 has been announced!

https://svelte.dev/blog/announcing-sveltekit-1.0

[Lms24]

Hey folks, I had some time over the holidays and managed to come up with some first strategies on how to use the current Sentry SDKs for SvelteKit. So here are some instructions on how to get started.

Disclaimer

Please keep in mind that this is not yet complete and that there's no guarantee that this works in every situation. There are probably some things we could do better here, so please feel free to share your experiences. Also, I've only used what's publicly available, so this is not a new SDK something that goes into this direction.
We'll eventually start work on a proper SDK for SvelteKit, there's just no concrete time frame, yet.

Get Started

Install the Svelte and Node SDKs:

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

Initializing the SDKs

Here, one of the challenges is to initialize the SDK as early as possible, both on client and server. The best I came up with was to leverage SvelteKit's hooks, to initialize the SDKs and catch errors:

Server-side

Here we can initialize the Node SDK for the server side:

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

Here we can intialize the Svelte SDK which will only run on the client:

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 give you error monitoring in most situations. However, source maps are currently not yet working correctly. I didn't have time to look into this, yet but the high-level plan would be to configure Vite to generate source maps, which should then be uploaded to Sentry. For this, You can use the Sentry Vite Plugin. @ambiguous48 already posted some hints what might be necessary for this to work.

[colinhowells]

Well, it works fine aside from sourcemaps (which I mentioned upthread a few times – your artifacts are '0', because the uploading is happening before maps have been created), but Sentry knows that's a problem and they'll figure out a way to deal with those eventually.