Track Svelte Components

Sentry's Svelte SDK offers a feature to monitor the performance of your Svelte components: component tracking. Enabling this feature provides you with spans in your transactions that show the initialization and update cycles of your Svelte components. This allows you to get a drilled-down view into how your components are behaving so you can do things like identify slow initializations or frequent updates, which might have an impact on your app's performance.

To get started, wrap your Svelte app's config from svelte.config.js with our withSentryConfig function:

Copied
import { withSentryConfig } from "@sentry/svelte";

const config = {
  // Your svelte config
  compilerOptions: {...},
};

export default withSentryConfig(config);

This wrapper will insert Sentry's component tracking preprocessor into your config. The preprocessor inserts a function call to a function in the Sentry SDK into the <script> tag of your components before your app is compiled and bundled.

Once you add withSentryConfig around your Svelte config, our SDK will track all your components by default. If you want to customize which components or lifecycle events should be tracked, you can pass additional options to withSentryConfig:

Copied
import { withSentryConfig } from "@sentry/svelte";

const config = {
  // Your svelte config
  compilerOptions: {...},
};

const sentryOptions = {
  // Groups all component tracking-related options
  // (optional)
  componentTracking: {
    // Add the components you want to be tracked to this array.
    // Specificy `true` to track all components or `false` to disable
    // tracking entirely
    // (optional, defaults to `true`)
    trackComponents: ["Navbar", "PrimaryButton", "LoginForm"],
    // To disable component initialization spans, set this to `false`.
    // (optional, defaults to `true`)
    trackInit: true,
    // To disable component update spans, set this to `false`
    // (optional, defaults to `true`)
    trackUpdates: false,
  },
};

export default withSentryConfig(config, sentryOptions);

This feature adds the following spans to the ongoing transaction:

ui.svelte.init

A span that represents the duration between a component's instance creation and the onMount lifecycle hook call.

ui.svelte.update

A span that represents the duration between a component's beforeUpdate and afterUpdate lifecycle hook calls.

If you don't want to use our withSentryConfig wrapper to automatically instrument your components at build time, you can call the tracking function manually in every component you would like to see tracked:

Copied
<script>
  import * as Sentry from "@sentry/svelte";
  Sentry.trackComponent({
    // To disable component initialization spans, set this to `false`.
    // (defaults to `true`)
    trackInit: true,
    // To disable component update spans, set this to `false`
    // (defaults to `true`)
    trackUpdates: false,
    // Specify a custom name to be shown in the span description
    // (defaults to the automatically detected component name)
    componentName: 'MyAwesomeComponent'
  })
  // rest of your code
</script>
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").