SvelteKit Support #5838
Replies: 19 comments 81 replies
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
You would probably have to run 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. |
Beta Was this translation helpful? Give feedback.
-
|
Use |
Beta Was this translation helpful? Give feedback.
-
|
Would be great to have SvelteKit support! |
Beta Was this translation helpful? Give feedback.
-
|
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?
These are all with a question mark. Curious what would be the most important/most valuable for Svelte devs to see in Sentry |
Beta Was this translation helpful? Give feedback.
-
|
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 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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 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();
}
// 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;
} |
Beta Was this translation helpful? Give feedback.
-
That would be great if you get the chance! |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
For those who are following this issue and need help with sourcemaps, we recently revamped our support here. We now have bundler plugins for https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/ |
Beta Was this translation helpful? Give feedback.
-
|
SvelteKit 1.0 has been announced! |
Beta Was this translation helpful? Give feedback.
-
|
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. DisclaimerPlease 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. Get StartedInstall the Svelte and Node SDKs: npm install --save @sentry/svelte @sentry/nodeInitializing the SDKsHere, 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-sideHere we can initialize the Node SDK for the server side:
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-sideHere 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;LimitationsThis 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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
@colinhowells I was able to make sourcemaps work partially, I've mention about it in this issue. Also thank you for letting me know about Toucan, that saved me from pulling my hair further. :) |
Beta Was this translation helpful? Give feedback.
-
|
@fjdumont I agree stack traces/frames do seem not right |
Beta Was this translation helpful? Give feedback.
-
|
Have you tried building this and running node on the generated build? I am getting a |
Beta Was this translation helpful? Give feedback.
-
|
Runs fine on |
Beta Was this translation helpful? Give feedback.
-
|
Yes please! |
Beta Was this translation helpful? Give feedback.
-
|
We don't have a hard date for shipping, but it is on the plan for the quarter! |
Beta Was this translation helpful? Give feedback.
-
|
Now this is some good news!!! |
Beta Was this translation helpful? Give feedback.
-
|
Waiting for Sveltekit support in Sentry |
Beta Was this translation helpful? Give feedback.
-
|
no hard date yet, but we will keep you posted! |
Beta Was this translation helpful? Give feedback.
-
|
Can't wait for native support for SvelteKit |
Beta Was this translation helpful? Give feedback.
-
|
Hey folks - need some of your opinions. We're starting to add features to the SDK and wanted to know if we should be automatically hooking into the If we do decide to automatically instrument these, do you want to see errors coming from both (one generated from the server from the I'm leaning toward only instrumenting the When we eventually add performance monitoring, we can link a distributed trace between the execution of an erroring load function and the rendering of a |
Beta Was this translation helpful? Give feedback.
-
|
TLDR: Too noisy. SvelteKit distinguishes between expected and unexpected errors (docs) Unexpected errors will go through the handleError hook (docs)
Expected errors (such as 400s, 401s, 404s etc) are usually uninteresting to me. But I'm confident there's use cases. I'd suggest to at least make it opt-out (maybe even opt-in?).
👍 Also, the error on the Also, what I find most frustrating in most of my custom integrations was that I had the same error as two separate issues in Sentry, because the stackframe was different (server vs. browser) and issue grouping did not work ootb. Regarding performance tracing: I also enjoy using the Server-Timing headers for performance debugging and (manual) tracing. Making this data accessible from within Sentry would not only be awesome, but also highly idiomatic for SvelteKit. Surely there must be an integration for that already, but I could not find anything in the docs. |
Beta Was this translation helpful? Give feedback.
-
|
We'll be automatically instrumenting
Testing out some use cases internally, IMO I think we can make 500s opt-out, but the other status codes opt-in, but will test more.
I added this as a TODO item for us on #6692
Supporting https://developer.mozilla.org/en-US/docs/Web/API/PerformanceServerTiming seems very interesting, will ask our performance team to take a look! |
Beta Was this translation helpful? Give feedback.
-
|
Hello everyone, we just released version 7.44.0 with the first alpha version of We'd really appreciate feedback, be it bug reports, UX/DX opinions, or of course thanks and praises 😄 Feel free to reach out in the Sveltekit SDK github issue, or in case of a bug report, please open a new issue. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Yes please support Vercel and Cloudflare (toucan-js exists but needs work on sveltekit) |
Beta Was this translation helpful? Give feedback.
-
|
Right after we get performance monitoring working for Sveltekit Node, we'll start to take a look at Vercel/Cloudflare We already have a working Vercel Edge SDK we use under the hood for our Next.js SDK, so we can just abstract it out :) |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, it works well for my adapter-node application! |
Beta Was this translation helpful? Give feedback.
-
|
Hey everyone ! I'm quite puzzled with the Sveltekit+Vercel combo on Sentry. I'm able to have my Sveltekit app deployed by Vercel on Sentry showing up; but unable to upload source maps. Getting the same issue as @isaacharrisholt : @Lms24 mentioned that you guys were refactoring the SDK internals first in #8693 but this one has been closed. Bottom line: have anyone been able to upload source maps of a sveltekit project hosted on vercel to Sentry ? If so, what were that packages you used to make it work ? :) |
Beta Was this translation helpful? Give feedback.
-
|
Uploading sourcemaps should work fine, but we don't quite have support for the propriety vercel edge runtime just yet in Sveltekit. Please see #9107 as the new issue to track for this - PRs are welcome if you would like to help out here! |
Beta Was this translation helpful? Give feedback.
-
|
Hi folks, while working on the SDK, we had a couple of ideas for additional hooks in SvelteKit. I opened a few issues on the SvelteKit repo with more details and a PoC PR:
Please feel free to leave your thoughts in these issues! The bottom line is that with these new hooks, it would be significantly easier for users to integrate the Sentry SDK into their apps. |
Beta Was this translation helpful? Give feedback.
-
|
Trying to implement the What could the cause of this be? |
Beta Was this translation helpful? Give feedback.
-
|
@alexbjorlig - this is because of some funky cjs/esm resolution. To unblock yourself you can do: import Sentry from "@sentry/sveltekit";
Sentry.captureException(...)We are fixing this with #7644 |
Beta Was this translation helpful? Give feedback.
-
Update Time (7.46.0)Hi everyone, we released 7.46.0 today with a bunch of new features for the SvelteKit SDK: Performance Monitoring SupportWith this release, the SDK adds support for performance monitoring in SvelteKit! All it takes to get started is to add a few handlers to SvelteKit hooks and to wrap your The SDK will capture and connect performance data on the client and on the server. This will help you inspect the performance of your page loads, navigations, server responses, API routes, Example of a full trace: Server-side transaction: Client-side pageload transaction: Server-side
|
Beta Was this translation helpful? Give feedback.
-
|
@hrueger Can you try installing import * as Sentry from '@sentry/node';Other than that, I have |
Beta Was this translation helpful? Give feedback.
-
|
@thenbe Thanks for the tip, however, it's not working for me. Are you using the |
Beta Was this translation helpful? Give feedback.
-
|
@Lms24 Now I got a different error, although I'm not sure what has changed 😅 Here's the repo, setup instructions in the Readme. |
Beta Was this translation helpful? Give feedback.
-
|
@hrueger I was able to get it working by moving |
Beta Was this translation helpful? Give feedback.
-
|
@thenbe made a PR which fixes things (don't know why it was not working earlier, I basically tried the same). Anyway, it seems to work when However, it would be great if it was also working as a No need to prioritize this though, as there is know a known workaround. Edit: Thanks @thenbe, I didn't see your comment earlier. |
Beta Was this translation helpful? Give feedback.
-
|
I've followed the instructions to integrate the new SvelteKit plugin and I am seeing the following warning in my console (locally, running the dev server): The readme or the docs don't say anything about this. What do I need to do? Can I ignore this? |
Beta Was this translation helpful? Give feedback.
-
|
I am seeing it in the browser's console, not the server side. I installed the SDK as a normal dependency, not a devDependency. |
Beta Was this translation helpful? Give feedback.
-
|
Okay, this seems weird. Please open an issue and provide reproduction instructions (or a minimal repro app) of the issue. Seems like something isn't working as intended. Which adapter are you using? |
Beta Was this translation helpful? Give feedback.
-
|
I'm using the Node adapter, but this is just with the local dev server, so no adapter is involved. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, I figured it out: I didn't have The warning isn't very helpful, and I wasn't aware that this setting is required. Which makes me wonder why it's not just a default setting? |
Beta Was this translation helpful? Give feedback.
-
|
Ahh this makes sense. I quickly checked and I know why this happens. First:
Now, here's why this happens:
I'll discuss the best way to fix this with the team and open a PR. Thanks for reporting! |
Beta Was this translation helpful? Give feedback.
-
|
Hi everyone, I'm adding sentry to a standard sveltekit application hosted on Vercel. The sentry wizard creates/populates hooks.server and hooks.client files, all good. However, the wizard does NOT populate Environment and Release varaibles in Sentry.Init() for hooks.server.ts the solution was easy enough: However, I am completely stuck on how to achieve the same in hooks.client.js For the environment, I can work around it by manually adding a PUBLIC_ENVIRONMENT variable and populating as needed. Anyone got any ideas or dealt with this recently? |
Beta Was this translation helpful? Give feedback.
-
|
there are a couple things you could do:
I went with the latter – you can grab it from
I haven't worked with Vercel so you may not need So in server hooks, you'd go get the This pattern works great (assuming you won't mind having a hash as a version name and not semver or something) for me – your commit is your deployment hash is your app version is your Sentry release, so figuring things out is a lot simpler. // svelte.config.js or .ts
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').KitConfig} */
const config = {
kit: {
adapter: adapter(),
version: {
name: process?.env?.VERCEL_GIT_COMMIT_SHA ?? Date.now().toString(),
pollInterval: 60000, // 1 min
},
},
preprocess: [vitePreprocess()],
};
export default config;The
<nav data-sveltekit-reload={$updated ? '' : 'off'}>
<!-- links in here will be hard browser reloads when the app's version changes -->
</nav>
{#if $updated}
<button on:click={() => location.reload()}>This app’s been updated! Click to refresh</button>
{/if} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much! I didn't know I could override the version name in svelte.config. Git SHA everywhere makes a lot of sense for us too. We don't really do semver for our end-client web apps. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry for getting off-topic, but:
Be wary if you SSG/SSR external data (e.g. from a CMS) during build in combination with deploy/build hooks (they may get triggered from updated content in the external system). |
Beta Was this translation helpful? Give feedback.
-
|
Is there any update on getting this to work in an edge computing runtime? Eg: on Vercel's edge functions? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @madeleineostoja not at this point unfortunately. Our priorities shifted a little. It's on our backlog but I can't give you an ETA at the moment. |
Beta Was this translation helpful? Give feedback.
-
|
Is sourcemaps working for anyone? I'm using Vercel (normal lambda runtime) & the wizard completed all the steps correctly. The sourcemaps are even getting uploaded, but not resolved in the stacktraces. 
|
Beta Was this translation helpful? Give feedback.
-
|
One thing you should know is I haven't yet set things up using the official SvelteKit SDK – for my Pages projects it's not there yet because some lower-level stuff in the SDK needs to be addressed before that can work. So I'm doing everything with |
Beta Was this translation helpful? Give feedback.
-
Hmm this shouldn't be the case. If you don't set a release in your If you're happy with your current setup then I don't think it makes sense to tinker around further but if you want to revisit this and you run into the same issue again, let me know. Also, please try our troubleshooting section (especially, |
Beta Was this translation helpful? Give feedback.
-
|
Absolutely, a bit tight on time so dont have time to experiment but will definitely give it a shot in a couple of weeks. Thanks a lot for your help tho! |
Beta Was this translation helpful? Give feedback.
-
|
This is a great solution! @colinhowells I ended up just setting the dsn to an empty string in dev mode for now hahah. Will try this method soon. @Lms24 are there any official recommendations on how to turn off sentry in dev mode? |
Beta Was this translation helpful? Give feedback.
-
|
If you just want to turn the SDK on/off, use the |
Beta Was this translation helpful? Give feedback.
-
|
Hi all, I am new in the domain and I need your help on this issue. I am making a to-do list and when I check the box on one of my items it is supposed to send it to another folder in my project called 'Completed' client side navigation(SPA) . For info, I am working on Sveltekit. C:/Users/unknow/OneDrive/Desktop/Javascript console/unknow work 2024/javascript-project/sveltekit/todolist/src/routes/+page.svelte:6:9 4 | import { goto } from '$app/navigation'; Also the $app/navigation is highlight in red. Thank you for your help. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @cirdect is this related to Sentry in some way? Based on the information and code you shared I don't see the connection to Sentry but maybe I'm missing something :) Otherwise, I suggest asking about this in a more general SvelteKit place. Maybe the Svelte Discord channel is a good place for that :) |
Beta Was this translation helpful? Give feedback.
-
|
Thank you Lms24, i will try it. |
Beta Was this translation helpful? Give feedback.
and others
-
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
Beta Was this translation helpful? Give feedback.
All reactions