Right now, as described in #11807, component tracking in SvelteKit apps is a bit tricky and doesn't work in the same way as for pure svelte apps. We should change this and make it as DX-friendly as possible. Ideally, users don't have to touch another file (i.e. svelte.config.js) to get automatic component tracking.
Solution Brainstorm
My current idea is to add the trackComponent function call to *.svelte files in a vite plugin, just like we modify +page.js files for load function auto instrumentation. We'd just return another vite plugin from the sentrySveltekit plugin factory functions which users already register in their vite.config.js.
This should work nicely but we need to keep an eye on the usual suspects:
source maps integrity
svelteHTML parsing / ensuring we inject the call in the right places
extracing correct and useful component names
Default behaviour: Track all pages by default? Also all components? Who knows...
Ensure this only runs client-side during/after hydration
Problem Statement
Right now, as described in #11807, component tracking in SvelteKit apps is a bit tricky and doesn't work in the same way as for pure svelte apps. We should change this and make it as DX-friendly as possible. Ideally, users don't have to touch another file (i.e.
svelte.config.js
) to get automatic component tracking.Solution Brainstorm
My current idea is to add the
trackComponent
function call to*.svelte
files in a vite plugin, just like we modify+page.js
files forload
function auto instrumentation. We'd just return another vite plugin from thesentrySveltekit
plugin factory functions which users already register in theirvite.config.js
.This should work nicely but we need to keep an eye on the usual suspects: