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.

Usage

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

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.

Configuration

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:

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);

Component Tracking Spans

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.

Alternative Usage

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:

<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>