Svelte Component Tracking doesn't pick up components without a <script> tag

[Lms24]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/svelte

SDK Version

7.15.0

Framework Version

Svelte 3

Link to Sentry event

No response

Steps to Reproduce

1. Create Svelte Test App w/ a few components; some of them with <script> tags, some without

Expected Result

The SDK should record spans for all components that should be tracked, regardless of if they have a <script> tag or not.

Actual Result

The SDK only records spans for components with one (or multiple) <script> tag(s) (afaict, we handle the multiple script tags case fine).

My suspicion is that components w/o <script> are not sent through the script preprocessor hook we use. If that is the case, we should consider switching to another hook or (if impossible/infeasible) update docs to inform people that they need to include a script tag.

To Do:

After discussing this internally, we decided to make some (backwards-compatible) changes to how we handle sentry-specific svelte.config.js entries. We'll go with a more general, withSentryConfig approach that allows us to have more freedom with adding future Svelte preprocessors or other compile-time specific sentry items.

By taking this approach, we can also fix this specific bug in a more elegant and much safer way.

• Create withSentryConfig function to wrap around the svelte.config.js option object (with feature parity to our current component tracking preprocessor) (feat(svelte): Add withSentryConfig function to wrap User Svelte Configuration #5936)
  • Deprecate trackComponentPreprocessor package export from the Svelte SDK
• Adjust componentTrackingPreprocessor to detect no-script components (fix(svelte): Track components without <script> tags #5957)
• Update docs to point people to the new wrapper rather than inserting our preprocessor themselves (ref(svelte): Update component tracking docs with new withSentryConfig approach sentry-docs#5649)

[Lms24]

Updated issue with To Do section

[Lms24]

Update: After actually implementing the 2nd pass preprocessor, I realized that the order in which preproc hooks are called is not as I thought. I thought that all hooks per preprocessor are executed, followed by the hooks of the next preproc:

basically:

p1.markup -> p1.script -> p2.markup -> p2.script

However, in reality, all markup hooks are executed before all script and style hooks:

p1.markup -> p2.markup -> p1.script -> p2.script

It's all in the Svelte docs btw, I should have just read this stuff more carefully :/

This means, our 2-pass approach won't work because for that, p1.script would need to be executed before p2.markup. So, we're back to the initial idea of injecting empty script tags in case there are none. This time, though, we'll rely on (almost) the same checking mechanism that svelte uses internally for finding <script> blocks.

[Lms24]

This was fixed (#5957) and will be released with the next SDK release