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 set up component tracking, you need to configure performance monitoring. For details on how to do this, check out our Performance documentation.
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.
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);
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:
<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>
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").