---
title: "Track Svelte Components"
description: "Learn how Sentry's Svelte SDK allows you to monitor the rendering performance of your application and its components."
url: https://docs.sentry.io/platforms/javascript/guides/svelte/features/component-tracking/
---

# Track Svelte Components | Sentry for Svelte

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](https://docs.sentry.io/platforms/javascript/guides/svelte/features/component-tracking.md#usage)

To set up component tracking, you need to configure tracing. For details on how to do this, check out our [Tracing documentation](https://docs.sentry.io/platforms/javascript/guides/svelte/tracing.md).

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

```javascript
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](https://docs.sentry.io/platforms/javascript/guides/svelte/features/component-tracking.md#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`:

```javascript
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.
    // Specify `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](https://docs.sentry.io/platforms/javascript/guides/svelte/features/component-tracking.md#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](https://docs.sentry.io/platforms/javascript/guides/svelte/features/component-tracking.md#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:

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