SvelteKit SDK Roadmap

[smeubank]

Discussed in #5838

Problem Statement

There is already support for the Svelte JavaScript framework, and now that SvelteKit is also in a 1.0 stable release we should extend the support.

See: https://svelte.dev/
SvelteKit: https://kit.svelte.dev/

If you are interested in this, please react to this issue and/or leave a comment below!

Solution Brainstorm

An SDK similar to what we have for NextJS, providing support for client- and server-side error and performance monitoring.

Initial Work

Initially, we'll focus on these tasks to release the first version of the SvelteKit SDK. While this version will still require manual instrumentation, it should be enough to release and receive early feedback from the community.

The following high-level tasks will be extracted to separate issues each (if applicable) to track them individually on a more fine-grained level:

#### Initial Tasks
- [ ] https://github.com/getsentry/sentry-javascript/issues/7348
- [ ] https://github.com/getsentry/sentry-javascript/issues/7402
- [ ] https://github.com/getsentry/sentry-javascript/issues/7403
- [ ] https://github.com/getsentry/sentry-javascript/issues/7489
- [ ] https://github.com/getsentry/sentry-javascript/issues/7526
- [ ] https://github.com/getsentry/sentry-javascript/issues/7413
- [ ] https://github.com/getsentry/sentry-javascript/issues/7669
- [ ] https://github.com/getsentry/sentry-javascript/pull/7881

Goal: Users can add and configure the SvelteKit SDK to their project and initialize the SDK for errors, performance and Replay. At this point, fully using the SDK will require manual wrapping of data fetchers and handlers. This SDK will work with the Node SvelteKit Adapter.

Advanced Features

Once we have a basic SDK, we start looking at more advanced features. These differ from stretch goal in the sense that they have immediate high value. For example: They make usage significantly easier or increase the supported platforms in which the SDK can be used.

- [ ] https://github.com/getsentry/sentry-wizard/issues/244
- [ ] https://github.com/getsentry/sentry-javascript/issues/7940
- [ ] https://github.com/getsentry/sentry-javascript/issues/8085
- [ ] Support Vercel Edge runtime

Goal: Users no longer need to manually add Sentry wrappers to their data fetchers and handlers. Instead, this will be done automatically at build time. Additionally, users can use the SDK not just on Node servers but also on Vercel.

Stretch Goals

If we have enough resources and time, there are a couple of cool stretch goals to take a look at:
We will likely not be able to implement all of these features from the start. That's okay. We can extract them to separate issues or implement them by demand at a later time.

#### Stretch Goals
- [x] Consider issue grouping rules for SvelteKit
- [ ] Resolve source maps for errors in dev mode (analogously to NextJS)
- [ ] Turn around trace-parent order in page load trace (i.e. client txn becomes parent of server txn)
- [ ] Add `tunnelRoute` option (analogously to NextJS)
- [ ] Store Navigation event (https://kit.svelte.dev/docs/types#public-types-navigationevent) in client side `handleError` call
- [ ] Store Request event (https://kit.svelte.dev/docs/types#public-types-requestevent) in server side `handleError` call
- [ ] Support more JS Runtimes/adapters (Cloudflare, Netlify)

Goal: The moon 🚀

Dog-fooding opportunities:

• JS SDK Bundle Size measurement app?

┆Issue is synchronized with this Jira Improvement by Unito

[Lms24]

@Lms24 i think there was still discussion if this would be an own package

I think we definitely need to make this its own package, just like the NextJS/Remix SDKs.

[Lms24]

Copying a few of the challenges for a SvelteKit SDK I identified so far from the GH discussion:

• How to automatically instrument/wrap load functions, both on the client and the server? (Proxy loader approach from Next.JS?)
  • Similarly, how to wrap API routes?
  • Similarly, can we auto-wrap the handle hook on the server?
• How to parameterize client routes (pageloads, navigations)?
  • I already have a quite functional routing instrumentation so this should be quite easily do-able.
• How to make SDK setup as simple as possible
  • Can we inject the Sentry.init calls into the hooks files?
  • Automatically upload source maps (Similarly to Next.JS)
  • Wrap vite/SvelteKit config so that we can add our stuff to it (e.g. preprocessors)?
• Will the SDK be compatible with Vercel edge functions, if an SK app is deployed to Vercel and edge functions are used? Similarly for other runtimes (e.g cloudflare workers)? See Support different JS runtimes #5611

EDIT: Also refined what we need to instrument on client and server in the original post

[Lms24]

For future reference: For the routing instrumentation, I currently have a version running that uses the navigating store. we might want to look into the navigation lifecycle hooks before/afterNavigate

[jycouet]

I would like to have SvelteKit support too. 👍

//From Svienna, Sentry talk.

🎉🎉🎉

[KayoticSully]

I would be very interested in this as well. Specifically a cloudflare workers compatible implementation. Thanks for considering a SvelteKit integration though!