[JavaScript] SvelteKit

[matejminar]

Arthur's Notes

• Created project and reading docs:
  • Where should I run the wizard command?
  • Writing this down would give me more confidence
• Running wizard
  • Project not selected
  • It asks me if I have an account -> obviously!
  • TypeScript error in vite config after wizard's autoinstumentation (url param unknown)
• Creating first issue in dev
  • No feedback on error button click
  • Env of dev errors is production
• Deployed changes to Vercel and creating issue there
  • Arc was blocking Sentry
  • Different error was captured when Sentry was blocked by Arc???
  • No sourcemaps although wizard told me it was configured
• Debugging sourcemaps
  • Sourcemap modal on issue page provided me with the wrong wizard command (generic wizard instead of svelte wizard)
  • Tabs in sourcemap modal are confusing (what are debug ids and how doe they differ from releases???)
  • Figured out that I need to install the Sentry integration on Vercel by searching on Google (https://docs.sentry.io/organization/integrations/deployment/vercel/). Nothing prompted me to do this...
• Linking stacktrace to GitHub
  • Linking the stacktrace to github was not straightforward as I had to urlDecode the + in the copied URL.
  • Was not able to find my repo as the Sentry integration was only allowed to access a single repo
  • I set this up ages ago and there was no hint in the UI that this could be the reason I do not see other repos

Ogi's Notes

Proposed improvements/tasks:

• [Wizard] Reevaluate prettier dialog step
• Use sentry example page for svelte to raise sourcemap awareness
• [Wizard] fix unused sentry auth token

Code

Repo: https://github.com/obostjancic/silver-robot

All steps:

• went to https://kit.svelte.dev/
• ran the create command locally
• created a project in sentry
• installed the sdk
• it asked me ◆ Looks like you have Prettier in your project. Do you want to run it on your files? but i dont get which files it means or what does prettier have to do with sentry
• i selected yes, it did something but i dont know what
• i opened up the example page, threw an error and got 2 issues in my app, i hope they are at least connected by a trace
• the backend issue looks ok, but i have nothing useful in the frontend
• No cta regarding source maps
• looking around the code, source map upload seems to be set up by the wizard
• running npm run build then npm run preview
• got Warning: No auth token provided. Will not upload source maps. Please set theauthTokenoption. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
• but my .sentryclirc contains a token :/

Simon's Notes:

Deploying the SvelteKit demo app using Vercel

• SvelteKit Docs: I feel bombarded with multiple callouts at the top of the page (compatibility)
• Adding sentry to the project gives me an error (node:75076) [DEP0040] DeprecationWarning: Thepunycodemodule is deprecated. Please use a userland alternative instead. (Usenode --trace-deprecation ...to show where the warning was created)
• Why can I not type for autocompletion in the wizard project selection, there are too many projects and it takes forever to scroll
• why does the wizard want to create an example page
• I clicked setup replay in the wizard, now the UI is prompting me to set up replay again? What is going on?
• The same issue from dev and prod are not grouped together? For a new version, the same exception creates a new issue - why are they not grouped?

Try to setup Source Maps:

• I click on “Make your stack traces readable”
• I copy the source map wizard thing
• Source map wizard tells me i should use the svelte kit wizard - I already authenticated the wizard, why do i have to do it again?
• Docs explain what artifact bundles are, but how does it work?
• Docs are gaslighting me, saying: @sentry/sveltekit will generate and upload source maps automatically, so that errors in Sentry will contain readable stack traces. It does not work - fixed in https://github.com/getsentry/sentry-wizard/pull/675
• The vote upload source maps docs interactive prompts don’t work correctly for me: https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/vite/ (already fixed by @chargome in https://github.com/getsentry/sentry-docs/pull/11397)
• Typescript warns me about sentry’s injected code in vite.config.ts: Object literal may only specify known properties, and 'url' does not exist in type 'SourceMapsUploadOptions'.ts(2353)
• I add the sentry auth token to my vercel environment variables -> now source maps work, but noone told me that