[@sentry/svelte] Component tracking with withSentryConfig + webpack breaks Svelte 5 runes mode

[scottohara]

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 SDK are you using?

@sentry/svelte

SDK Version

8.52.1

Framework Version

Svelte v5.19.6

Link to Sentry event

No response

Reproduction Example/SDK Setup

Repro: https://github.com/scottohara/svelte5-withsentryconfig-bug

The issue occurs when the following is true:

1. You have a Svelte component that uses runes (e.g. let now = $state(new Date().toString());)
2. The app is build using webpack + svelte-loader
3. You wrap the options passed to svelte-loader with withSentryConfig() to enable component tracking, e.g.

export default {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.svelte$/u,
        loader: "svelte-loader",
        options: withSentryConfig({
          compilerOptions: {...}
        })
      }
    ]
  }
}

Steps to Reproduce

Setup

git clone https://github.com/scottohara/svelte5-withsentryconfig-bug.git
cd svelte5-withsentryconfig-bug
npm install
webpack

Verify working

At this point, open the file dist/index.html in your browser. You should see a message like:

The time is <the current date and time>

This confirms that app builds & runs successfully without component tracking.

Enable component tracking

WITH_SENTRY=1 webpack

The WITH_SENTRY=1 environment variable instructs the webpack config to wrap the svelte-loader options in withSentryConfig().
Now open (or refresh) the dist/index.html page in your browser. You should now see a blank page, and in the browser console the following error:

Uncaught Error: https://svelte.dev/e/lifecycle_legacy_only

When caught, the error message is in fact:

beforeUpdate(...) cannot be used in runes mode

Expected Result

When component tracking is enabled (in the example repo, by passing WITH_SENTRY=1 to the webpack command; the app should not error and should display the same as when component tracking is disabled.

Actual Result

With component tracking disabled

A successful render, and no console errors:

With component tracking enabled

A failed render (blank page), and the Svelte legacy error:

Why does this happen?

I believe that the root cause is the code in @sentry/svelte that does component tracking uses the beforeUpdate(...) lifecycle method.
This lifecycle method is deprecated in Svelte 5.

It may be the case that withSentryConfig() was never designed to be used with webpack + svelte-loader (as it doesn't seem to have any issues when used in a Vite-based Svelte5 project).

However prior to Svelte 5 and runes mode, using withSentryConfig in webpack + svelte-loader in this way did not throw any errors.

[Lms24]

Hey @scottohara thanks for reporting this and also thanks for the great reproduction!

I think this is a general Svelte 5 (Runes mode) incompatibility with our component tracking feature. I looked briefly into a way to still track component updates in Runes mode but couldn't come up with something simple. Therefore, for version 8 of our SDK, I opened #15262 to at least degrade gracefully and avoid breaking the application.

You can completely disable update tracking by setting

withSentryConfig({/*your svelte config*/}, { componentTracking: { trackUpdates: false } })

or, if you use trackComponent directly, set

trackComponent({trackUpdates: false});

For posterity, If we wanted to get this working properly in all Svelte versions, we'd need to be smarter in a couple of ways:

• Distinguish between Svelte <=5 and Svelte 5+Runes (maybe possible at build time but not dead-simple)
• Import and use old (before|after)Update hooks for Svelte 4/5 w/o Runes
• Import and use an effect.pre/tick combination to track updates in Svelte 5 Runes mode. However, as far as I understand this, this combination would run always at least once. So not sure if we could track actual component updates with it at all.

In v9 of the SDK, I'll disable trackUpdates by default. I think we can justify this for two reasons:

1. More people will migrate to runes mode in the future
2. tracking updates has more performance overhead than tracking the initial mounts

[Lms24]

I merged #15262. It will be included in the next release. Thanks for reporting!